@gravity-ui/dynamic-forms 2.8.2 → 3.0.0

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Controller = void 0;
 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, value, parentOnChange, parentOnUnmount, }) => {
     const { tools, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
@@ -28,9 +27,6 @@ const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) =>
         useField: renderProps,
         useSearch: withSearch,
     }, __mirror);
-    if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec) && !spec.viewSpec.hidden) {
-        return withSearch(render(renderProps));
-    }
-    return null;
+    return withSearch(render(renderProps));
 };
 exports.Controller = Controller;

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

@@ -8,16 +8,18 @@ const helpers_1 = require("../../../helpers");
 const useRender = ({ name, spec, inputEntity, Layout, }) => {
     const render = react_1.default.useCallback((props) => {
         if (inputEntity && (0, helpers_1.isCorrectSpec)(spec) && lodash_1.default.isString(name)) {
-            if (inputEntity.independent) {
+            if (!spec.viewSpec.hidden) {
+                if (inputEntity.independent) {
+                    const InputComponent = inputEntity.Component;
+                    return (react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props)));
+                }
                 const InputComponent = inputEntity.Component;
-                return react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props));
+                const input = react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
+                if (Layout) {
+                    return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
+                }
+                return input;
             }
-            const InputComponent = inputEntity.Component;
-            const input = react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
-            if (Layout) {
-                return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
-            }
-            return input;
         }
         return null;
     }, [spec, name, inputEntity, Layout]);

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

@@ -10,7 +10,7 @@ const useSearch = (spec, value, name) => {
     const { setField, removeField, isHiddenField, searchFunction } = (0, useSearchContext_1.useSearchContext)();
     const searchResult = react_1.default.useMemo(() => !searchFunction(spec, value, name), [name, searchFunction, spec, value]);
     const hidden = react_1.default.useMemo(() => isHiddenField(name), [isHiddenField, name]);
-    const withSearch = react_1.default.useCallback((children) => react_1.default.createElement("div", { className: b({ hidden: hidden }) }, children), [hidden]);
+    const withSearch = react_1.default.useCallback((children) => children ? react_1.default.createElement("div", { className: b({ hidden: hidden }) }, children) : null, [hidden]);
     react_1.default.useEffect(() => {
         setField(name, searchResult);
     }, [searchResult]);

package/build/cjs/lib/core/components/View/ViewController.js

@@ -8,9 +8,6 @@ const ViewController = ({ spec, name, }) => {
     const { config, value, Link } = (0, hooks_1.useDynamicFormsCtx)();
     const { viewEntity, Layout } = (0, hooks_1.useComponents)(spec, config);
     const render = (0, hooks_1.useRender)({ name, value, spec, viewEntity, Layout, Link });
-    if (!spec.viewSpec.hidden) {
-        return react_1.default.createElement(react_1.default.Fragment, null, render);
-    }
-    return null;
+    return react_1.default.createElement(react_1.default.Fragment, null, render);
 };
 exports.ViewController = ViewController;

package/build/cjs/lib/core/components/View/hooks/useRender.js

@@ -10,18 +10,20 @@ const useRender = ({ value, name, spec, viewEntity, Layout, Link, }) => {
     const render = react_1.default.useMemo(() => {
         var _a;
         if (viewEntity && (0, helpers_1.isCorrectSpec)(spec) && lodash_1.default.isString(name)) {
-            const currentValue = name ? lodash_1.default.get(value, name) : value;
-            const linkValue = (0, react_is_1.isValidElementType)(Link) && ((_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.link) ? (react_1.default.createElement(Link, { value: currentValue, link: spec.viewSpec.link })) : undefined;
-            if (viewEntity.independent) {
+            if (!spec.viewSpec.hidden) {
+                const currentValue = name ? lodash_1.default.get(value, name) : value;
+                const linkValue = (0, react_is_1.isValidElementType)(Link) && ((_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.link) ? (react_1.default.createElement(Link, { value: currentValue, link: spec.viewSpec.link })) : undefined;
+                if (viewEntity.independent) {
+                    const InputComponent = viewEntity.Component;
+                    return (react_1.default.createElement(InputComponent, { spec: spec, name: name, Layout: Layout, value: currentValue, linkValue: linkValue }));
+                }
                 const InputComponent = viewEntity.Component;
-                return (react_1.default.createElement(InputComponent, { spec: spec, name: name, Layout: Layout, value: currentValue, linkValue: linkValue }));
+                const input = (react_1.default.createElement(InputComponent, { spec: spec, name: name, value: currentValue, linkValue: linkValue }));
+                if (Layout) {
+                    return (react_1.default.createElement(Layout, { spec: spec, name: name, value: currentValue }, input));
+                }
+                return input;
             }
-            const InputComponent = viewEntity.Component;
-            const input = (react_1.default.createElement(InputComponent, { spec: spec, name: name, value: currentValue, linkValue: linkValue }));
-            if (Layout) {
-                return (react_1.default.createElement(Layout, { spec: spec, name: name, value: currentValue }, input));
-            }
-            return input;
         }
         return null;
     }, [spec, name, value, viewEntity, Layout, Link]);

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -6,9 +6,6 @@
   align-items: center;
   background-color: var(--yc-color-base-float-hover);
 }
-.df-monaco-header_card {
-  border-bottom: 1px solid var(--yc-color-line-generic);
-}
 .df-monaco-header__language {
   margin-top: 2px;
   margin-left: 10px;

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js

@@ -7,7 +7,7 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('monaco-header');
-const MonacoHeader = ({ language, editButton, card }) => (react_1.default.createElement("div", { className: b({ card }) },
+const MonacoHeader = ({ language, editButton }) => (react_1.default.createElement("div", { className: b() },
     react_1.default.createElement("div", null,
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.File, size: 18 }),
         react_1.default.createElement("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css

@@ -1,9 +1,6 @@
 .df-monaco-input {
   width: 550px;
 }
-.df-monaco-input_card {
-  width: auto;
-}
 .df-monaco-input__container {
   border: 1px solid var(--yc-color-line-generic);
 }

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonacoInputCard = exports.MonacoInput = exports.MonacoInputBase = void 0;
+exports.MonacoInput = exports.MonacoInputBase = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
@@ -11,7 +11,7 @@ const MonacoHeader_1 = require("./MonacoHeader");
 const MonacoInputDialog_1 = require("./MonacoInputDialog");
 const useMonacoOptions_1 = require("./useMonacoOptions");
 const b = (0, utils_1.block)('monaco-input');
-const MonacoInputBase = ({ name, input, spec, card, MonacoComponent, withoutDialog, }) => {
+const MonacoInputBase = ({ name, input, spec, MonacoComponent, withoutDialog, }) => {
     const { value, onChange } = input;
     const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
     const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
@@ -31,14 +31,12 @@ const MonacoInputBase = ({ name, input, spec, card, MonacoComponent, withoutDial
     if (!MonacoEditor) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b({ card }) },
+    return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('container'), "data-qa": name },
-            react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card, editButton: dialogButton }),
+            react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, editButton: dialogButton }),
             react_1.default.createElement(MonacoEditor, { language: language, value: monacoValue, height: "300", onChange: setMonacoValue, options: options })),
-        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, card: card, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
+        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
 };
 exports.MonacoInputBase = MonacoInputBase;
 const MonacoInput = (props) => (react_1.default.createElement(exports.MonacoInputBase, Object.assign({}, props)));
 exports.MonacoInput = MonacoInput;
-const MonacoInputCard = (props) => (react_1.default.createElement(exports.MonacoInputBase, Object.assign({}, props, { card: true })));
-exports.MonacoInputCard = MonacoInputCard;

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js

@@ -10,7 +10,7 @@ const utils_1 = require("../../../utils");
 const MonacoHeader_1 = require("./MonacoHeader");
 const useMonacoOptions_1 = require("./useMonacoOptions");
 const b = (0, utils_1.block)('monaco-input-dialog');
-const MonacoInputDialog = ({ name, value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
+const MonacoInputDialog = ({ name, value, title, visible, language, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
     const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
     const handleClose = react_1.default.useCallback(() => {
         onChange(value);
@@ -24,7 +24,7 @@ const MonacoInputDialog = ({ name, value, title, visible, language, card, onChan
         react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
         react_1.default.createElement(uikit_1.Dialog.Body, null,
             react_1.default.createElement("div", { className: b('container'), "data-qa": `${name}-dialog` },
-                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card }),
+                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language }),
                 react_1.default.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, options: options }))),
         react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));
 };

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

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

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

@@ -2,12 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Accordeon"), exports);
-tslib_1.__exportStar(require("./AccordeonCardLayout"), exports);
 tslib_1.__exportStar(require("./CardAccordeon"), exports);
 tslib_1.__exportStar(require("./CardSection"), exports);
 tslib_1.__exportStar(require("./Row"), exports);
-tslib_1.__exportStar(require("./Row2"), exports);
 tslib_1.__exportStar(require("./Section"), exports);
-tslib_1.__exportStar(require("./SectionCard"), exports);
 tslib_1.__exportStar(require("./TableCell"), exports);
 tslib_1.__exportStar(require("./Transparent"), exports);

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

@@ -2,12 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ViewAccordeon"), exports);
-tslib_1.__exportStar(require("./ViewAccordeonCard"), exports);
 tslib_1.__exportStar(require("./ViewCardAccordeon"), exports);
 tslib_1.__exportStar(require("./ViewCardSection"), exports);
 tslib_1.__exportStar(require("./ViewRow"), exports);
-tslib_1.__exportStar(require("./ViewRow2"), exports);
 tslib_1.__exportStar(require("./ViewSection"), exports);
-tslib_1.__exportStar(require("./ViewSectionCard"), exports);
 tslib_1.__exportStar(require("./ViewTableCell"), exports);
 tslib_1.__exportStar(require("./ViewTransparent"), exports);

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css

@@ -1,7 +1,4 @@
 .df-monaco-base-view {
   border: 1px solid var(--yc-color-line-generic);
   width: 550px;
-}
-.df-monaco-base-view_card {
-  width: auto;
 }

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonacoViewCard = exports.MonacoView = void 0;
+exports.MonacoView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
@@ -11,7 +11,7 @@ const MonacoHeader_1 = require("../../Inputs/MonacoInput/MonacoHeader");
 const useMonacoOptions_1 = require("../../Inputs/MonacoInput/useMonacoOptions");
 const MonacoViewDialog_1 = require("./MonacoViewDialog");
 const b = (0, utils_1.block)('monaco-base-view');
-const MonacoBaseView = ({ value, spec, card }) => {
+const MonacoBaseView = ({ value, spec }) => {
     const { monacoParams, layoutTitle } = spec.viewSpec;
     const MonacoEditor = (0, hooks_1.useMonaco)();
     const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 12 };
@@ -21,13 +21,11 @@ const MonacoBaseView = ({ value, spec, card }) => {
     if (!value || !MonacoEditor) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b({ card }) },
-        react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card, editButton: react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true) },
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, editButton: react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true) },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: 16 })) }),
         react_1.default.createElement(MonacoEditor, { language: language, value: value, height: '250', options: options }),
-        react_1.default.createElement(MonacoViewDialog_1.MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, card: card, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
+        react_1.default.createElement(MonacoViewDialog_1.MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
 };
 const MonacoView = (props) => react_1.default.createElement(MonacoBaseView, Object.assign({}, props));
 exports.MonacoView = MonacoView;
-const MonacoViewCard = (props) => (react_1.default.createElement(MonacoBaseView, Object.assign({}, props, { card: true })));
-exports.MonacoViewCard = MonacoViewCard;

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js

@@ -10,7 +10,7 @@ const utils_1 = require("../../../utils");
 const MonacoHeader_1 = require("../../Inputs/MonacoInput/MonacoHeader");
 const useMonacoOptions_1 = require("../../Inputs/MonacoInput/useMonacoOptions");
 const b = (0, utils_1.block)('monaco-view-dialog');
-const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, card, }) => {
+const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, }) => {
     const MonacoEditor = (0, hooks_1.useMonaco)();
     const handleClose = react_1.default.useCallback(() => {
         onClose();
@@ -23,7 +23,7 @@ const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize,
         react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
         react_1.default.createElement(uikit_1.Dialog.Body, null,
             react_1.default.createElement("div", { className: b('container') },
-                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card }),
+                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language }),
                 react_1.default.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, options: options }))),
         react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));
 };

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

@@ -11,7 +11,6 @@ tslib_1.__exportStar(require("./MultiSelectView"), exports);
 tslib_1.__exportStar(require("./NumberWithScaleView"), exports);
 tslib_1.__exportStar(require("./ObjectBaseView"), exports);
 tslib_1.__exportStar(require("./ObjectValueInputView"), exports);
-tslib_1.__exportStar(require("./OneOfCardView"), exports);
 tslib_1.__exportStar(require("./OneOfView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dynamicViewCardConfig = exports.dynamicViewConfig = exports.dynamicCardConfig = exports.dynamicConfig = void 0;
+exports.dynamicViewConfig = exports.dynamicConfig = void 0;
 const components_1 = require("../components");
 const validators_1 = require("../validators");
 exports.dynamicConfig = {
@@ -112,103 +112,6 @@ exports.dynamicConfig = {
         },
     },
 };
-exports.dynamicCardConfig = {
-    array: {
-        inputs: {
-            select: { Component: components_1.MultiSelect },
-            table: { Component: components_1.TableArrayInput },
-            base: { Component: components_1.ArrayBase },
-        },
-        layouts: {
-            row: components_1.Row2,
-            accordeon: components_1.AccordeonCardLayout,
-            section: components_1.SectionWithSubtitle,
-            section2: components_1.SectionWithSubtitle2,
-            group: components_1.SectionCard,
-            group2: components_1.SectionCard2,
-            table_item: components_1.TableCell,
-            transparent: components_1.Transparent,
-        },
-        validators: {
-            base: (0, validators_1.getArrayValidator)(),
-        },
-    },
-    boolean: {
-        inputs: {
-            base: { Component: components_1.Checkbox },
-            switch: { Component: components_1.Switch },
-        },
-        layouts: {
-            row: components_1.Row2,
-            table_item: components_1.TableCell,
-        },
-        validators: {
-            base: (0, validators_1.getBooleanValidator)(),
-        },
-    },
-    number: {
-        inputs: {
-            base: { Component: components_1.Text },
-        },
-        layouts: {
-            row: components_1.Row2,
-            table_item: components_1.TableCell,
-            transparent: components_1.Transparent,
-        },
-        validators: {
-            base: (0, validators_1.getNumberValidator)(),
-        },
-    },
-    object: {
-        inputs: {
-            oneof: { Component: components_1.OneOfCard, independent: true },
-            secret: { Component: components_1.Secret, independent: true },
-            base: { Component: components_1.ObjectBase, independent: true },
-            text_link: { Component: components_1.TextLink, independent: true },
-            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,
-            accordeon: components_1.AccordeonCardLayout,
-            section: components_1.SectionWithSubtitle,
-            section2: components_1.SectionWithSubtitle2,
-            group: components_1.SectionCard,
-            group2: components_1.SectionCard2,
-            transparent: components_1.Transparent,
-        },
-        validators: {
-            base: (0, validators_1.getObjectValidator)(),
-        },
-    },
-    string: {
-        inputs: {
-            password: { Component: components_1.Text },
-            textarea: { Component: components_1.TextArea },
-            select: { Component: components_1.Select },
-            base: { Component: components_1.Text },
-            file_input: { Component: components_1.FileInput },
-            number_with_scale: { Component: components_1.NumberWithScale },
-            monaco_input: { Component: components_1.MonacoInputCard },
-            text_content: { Component: components_1.TextContent, independent: true },
-        },
-        layouts: {
-            row: components_1.Row2,
-            table_item: components_1.TableCell,
-            transparent: components_1.Transparent,
-            section: components_1.SectionWithSubtitle,
-            section2: components_1.SectionWithSubtitle2,
-            group: components_1.SectionCard,
-            group2: components_1.SectionCard2,
-        },
-        validators: {
-            base: (0, validators_1.getStringValidator)(),
-            number: (0, validators_1.getNumberValidator)(),
-        },
-    },
-};
 exports.dynamicViewConfig = {
     array: {
         views: {
@@ -302,84 +205,3 @@ exports.dynamicViewConfig = {
         },
     },
 };
-exports.dynamicViewCardConfig = {
-    array: {
-        views: {
-            select: { Component: components_1.MultiSelectView },
-            table: { Component: components_1.TableArrayView },
-            base: { Component: components_1.ArrayBaseView },
-        },
-        layouts: {
-            row: components_1.ViewRow2,
-            accordeon: components_1.ViewAccordeonCard,
-            section: components_1.ViewSection,
-            section2: components_1.ViewSection2,
-            group: components_1.ViewSectionCard,
-            group2: components_1.ViewSectionCard2,
-            table_item: components_1.ViewTableCell,
-            transparent: components_1.ViewTransparent,
-        },
-    },
-    boolean: {
-        views: {
-            base: { Component: components_1.BaseView },
-            switch: { Component: components_1.BaseView },
-        },
-        layouts: {
-            row: components_1.ViewRow2,
-            table_item: components_1.ViewTableCell,
-        },
-    },
-    number: {
-        views: {
-            base: { Component: components_1.BaseView },
-        },
-        layouts: {
-            row: components_1.ViewRow2,
-            table_item: components_1.ViewTableCell,
-            transparent: components_1.ViewTransparent,
-        },
-    },
-    object: {
-        views: {
-            oneof: { Component: components_1.OneOfCardView, independent: true },
-            secret: undefined,
-            base: { Component: components_1.ObjectBaseView, independent: true },
-            text_link: { Component: components_1.TextLinkView, independent: true },
-            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,
-            accordeon: components_1.ViewAccordeonCard,
-            section: components_1.ViewSection,
-            section2: components_1.ViewSection2,
-            group: components_1.ViewSectionCard,
-            group2: components_1.ViewSectionCard2,
-            transparent: components_1.ViewTransparent,
-        },
-    },
-    string: {
-        views: {
-            password: undefined,
-            textarea: { Component: components_1.TextAreaView },
-            select: { Component: components_1.BaseView },
-            base: { Component: components_1.BaseView },
-            file_input: { Component: components_1.FileInputView },
-            number_with_scale: { Component: components_1.NumberWithScaleView },
-            monaco_input: { Component: components_1.MonacoViewCard },
-            text_content: undefined,
-        },
-        layouts: {
-            row: components_1.ViewRow2,
-            table_item: components_1.ViewTableCell,
-            transparent: components_1.ViewTransparent,
-            section: components_1.ViewSection,
-            section2: components_1.ViewSection2,
-            group: components_1.ViewSectionCard,
-            group2: components_1.ViewSectionCard2,
-        },
-    },
-};

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

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import { isCorrectSpec } from '../../helpers';
 import { useComponents, useControllerMirror, useDynamicFormsCtx, useField, useRender, useSearch, useValidate, } from './hooks';
 export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
     const { tools, __mirror } = useDynamicFormsCtx();
@@ -24,8 +23,5 @@ export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount,
         useField: renderProps,
         useSearch: withSearch,
     }, __mirror);
-    if (_.isString(name) && isCorrectSpec(spec) && !spec.viewSpec.hidden) {
-        return withSearch(render(renderProps));
-    }
-    return null;
+    return withSearch(render(renderProps));
 };

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

@@ -4,16 +4,18 @@ import { isCorrectSpec } from '../../../helpers';
 export const useRender = ({ name, spec, inputEntity, Layout, }) => {
     const render = React.useCallback((props) => {
         if (inputEntity && isCorrectSpec(spec) && _.isString(name)) {
-            if (inputEntity.independent) {
+            if (!spec.viewSpec.hidden) {
+                if (inputEntity.independent) {
+                    const InputComponent = inputEntity.Component;
+                    return (React.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props)));
+                }
                 const InputComponent = inputEntity.Component;
-                return React.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props));
+                const input = React.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
+                if (Layout) {
+                    return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
+                }
+                return input;
             }
-            const InputComponent = inputEntity.Component;
-            const input = React.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
-            if (Layout) {
-                return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
-            }
-            return input;
         }
         return null;
     }, [spec, name, inputEntity, Layout]);

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

@@ -1,4 +1,4 @@
 import { Spec } from '../../../../types';
 import { FieldValue } from '../../types';
 import './useSearch.css';
-export declare const useSearch: (spec: Spec, value: FieldValue, name: string) => (children: JSX.Element | null) => JSX.Element;
+export declare const useSearch: (spec: Spec, value: FieldValue, name: string) => (children: JSX.Element | null) => JSX.Element | null;

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

@@ -7,7 +7,7 @@ export const useSearch = (spec, value, name) => {
     const { setField, removeField, isHiddenField, searchFunction } = useSearchContext();
     const searchResult = React.useMemo(() => !searchFunction(spec, value, name), [name, searchFunction, spec, value]);
     const hidden = React.useMemo(() => isHiddenField(name), [isHiddenField, name]);
-    const withSearch = React.useCallback((children) => React.createElement("div", { className: b({ hidden: hidden }) }, children), [hidden]);
+    const withSearch = React.useCallback((children) => children ? React.createElement("div", { className: b({ hidden: hidden }) }, children) : null, [hidden]);
     React.useEffect(() => {
         setField(name, searchResult);
     }, [searchResult]);

package/build/esm/lib/core/components/View/ViewController.d.ts

@@ -3,4 +3,4 @@ export interface ViewControllerProps<SpecType extends Spec> {
     spec: SpecType;
     name: string;
 }
-export declare const ViewController: <SpecType extends Spec>({ spec, name, }: ViewControllerProps<SpecType>) => JSX.Element | null;
+export declare const ViewController: <SpecType extends Spec>({ spec, name, }: ViewControllerProps<SpecType>) => JSX.Element;

package/build/esm/lib/core/components/View/ViewController.js

@@ -4,8 +4,5 @@ export const ViewController = ({ spec, name, }) => {
     const { config, value, Link } = useDynamicFormsCtx();
     const { viewEntity, Layout } = useComponents(spec, config);
     const render = useRender({ name, value, spec, viewEntity, Layout, Link });
-    if (!spec.viewSpec.hidden) {
-        return React.createElement(React.Fragment, null, render);
-    }
-    return null;
+    return React.createElement(React.Fragment, null, render);
 };

package/build/esm/lib/core/components/View/hooks/useRender.js

@@ -6,18 +6,20 @@ export const useRender = ({ value, name, spec, viewEntity, Layout, Link, }) => {
     const render = React.useMemo(() => {
         var _a;
         if (viewEntity && isCorrectSpec(spec) && _.isString(name)) {
-            const currentValue = name ? _.get(value, name) : value;
-            const linkValue = isValidElementType(Link) && ((_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.link) ? (React.createElement(Link, { value: currentValue, link: spec.viewSpec.link })) : undefined;
-            if (viewEntity.independent) {
+            if (!spec.viewSpec.hidden) {
+                const currentValue = name ? _.get(value, name) : value;
+                const linkValue = isValidElementType(Link) && ((_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.link) ? (React.createElement(Link, { value: currentValue, link: spec.viewSpec.link })) : undefined;
+                if (viewEntity.independent) {
+                    const InputComponent = viewEntity.Component;
+                    return (React.createElement(InputComponent, { spec: spec, name: name, Layout: Layout, value: currentValue, linkValue: linkValue }));
+                }
                 const InputComponent = viewEntity.Component;
-                return (React.createElement(InputComponent, { spec: spec, name: name, Layout: Layout, value: currentValue, linkValue: linkValue }));
+                const input = (React.createElement(InputComponent, { spec: spec, name: name, value: currentValue, linkValue: linkValue }));
+                if (Layout) {
+                    return (React.createElement(Layout, { spec: spec, name: name, value: currentValue }, input));
+                }
+                return input;
             }
-            const InputComponent = viewEntity.Component;
-            const input = (React.createElement(InputComponent, { spec: spec, name: name, value: currentValue, linkValue: linkValue }));
-            if (Layout) {
-                return (React.createElement(Layout, { spec: spec, name: name, value: currentValue }, input));
-            }
-            return input;
         }
         return null;
     }, [spec, name, value, viewEntity, Layout, Link]);

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -6,9 +6,6 @@
   align-items: center;
   background-color: var(--yc-color-base-float-hover);
 }
-.df-monaco-header_card {
-  border-bottom: 1px solid var(--yc-color-line-generic);
-}
 .df-monaco-header__language {
   margin-top: 2px;
   margin-left: 10px;

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.d.ts

@@ -3,7 +3,6 @@ import './MonacoHeader.css';
 interface MonacoHeaderProps {
     language?: string;
     editButton?: React.ReactNode;
-    card?: boolean | undefined;
 }
 export declare const MonacoHeader: React.FC<MonacoHeaderProps>;
 export {};

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js

@@ -4,7 +4,7 @@ import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './MonacoHeader.css';
 const b = block('monaco-header');
-export const MonacoHeader = ({ language, editButton, card }) => (React.createElement("div", { className: b({ card }) },
+export const MonacoHeader = ({ language, editButton }) => (React.createElement("div", { className: b() },
     React.createElement("div", null,
         React.createElement(Icon, { data: File, size: 18 }),
         React.createElement("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));