@gravity-ui/dynamic-forms 5.30.0 → 5.32.0

package/build/cjs/lib/unstable/core/constants.d.ts

@@ -11,6 +11,7 @@ export declare enum SchemaRendererEventType {
     Patch = "patch",
     Settings = "settings",
     Schema = "schema",
+    Submit = "submit",
     UserContext = "userContext"
 }
 export declare enum JsonSchemaType {

package/build/cjs/lib/unstable/core/constants.js

@@ -16,6 +16,7 @@ var SchemaRendererEventType;
     SchemaRendererEventType["Patch"] = "patch";
     SchemaRendererEventType["Settings"] = "settings";
     SchemaRendererEventType["Schema"] = "schema";
+    SchemaRendererEventType["Submit"] = "submit";
     SchemaRendererEventType["UserContext"] = "userContext";
 })(SchemaRendererEventType || (exports.SchemaRendererEventType = SchemaRendererEventType = {}));
 var JsonSchemaType;

package/build/cjs/lib/unstable/core/useSchemaRenderer/types/state.d.ts

@@ -21,6 +21,7 @@ export interface SchemaRendererState<UserContext extends Record<string, unknown>
         coerceInitialValues: boolean;
         jsonDefaultValues: boolean;
     };
+    submitCount: number;
     subscribe: (subscriber: SchemaRendererSubscriber) => string;
     subscribers: {
         byId: Record<string, SchemaRendererSubscriber>;

package/build/cjs/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.js

@@ -49,6 +49,7 @@ const useSchemaRenderer = ({ coerceInitialValues = true, config, connectValidate
             runValidate,
             settings: { coerceInitialValues, jsonDefaultValues },
             schema: nameUpdated || schemaUpdated ? (0, cloneDeep_1.default)(originalSchema) : (prevState === null || prevState === void 0 ? void 0 : prevState.schema) || {},
+            submitCount: nameUpdated || schemaUpdated || !prevState ? 0 : prevState.submitCount,
             subscribe,
             subscribers: (prevState === null || prevState === void 0 ? void 0 : prevState.subscribers) || { byId: {}, byName: new Map(), byPath: new Map() },
             unsubscribe,
@@ -118,6 +119,22 @@ const useSchemaRenderer = ({ coerceInitialValues = true, config, connectValidate
             initialState.dispatchEvent(initialEvents);
         }
     }, [initialEvents, initialState]);
+    react_1.default.useEffect(() => {
+        const originalSubmit = form.submit;
+        form.submit = () => {
+            var _a;
+            const srField = form.getFieldState((0, utils_1.getServiceFieldName)(constants_2.SCHEMA_RENDERER_SERVICE_FIELD, headName));
+            const srState = (_a = srField === null || srField === void 0 ? void 0 : srField.data) === null || _a === void 0 ? void 0 : _a.state;
+            if (srState) {
+                srState.submitCount += 1;
+                srState.dispatchEvent([{ type: constants_1.SchemaRendererEventType.Submit, all: true }]);
+            }
+            return originalSubmit.call(form);
+        };
+        return () => {
+            form.submit = originalSubmit;
+        };
+    }, [form]);
     react_1.default.useEffect(() => {
         const strictChecker = strictCheckerRef.current;
         return () => {

package/build/cjs/lib/unstable/kit/constants/config.d.ts

@@ -288,6 +288,7 @@ export declare const untypedConfig: {
         readonly formEntities: {
             readonly base: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").ObjectEntityProps>;
+                readonly independent: true;
             };
             readonly dot_value: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").DotValueProps>;
@@ -336,6 +337,7 @@ export declare const untypedConfig: {
         readonly overviewEntities: {
             readonly base: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").ObjectEntityProps>;
+                readonly independent: true;
             };
             readonly dot_value: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").DotValueProps>;
@@ -397,7 +399,7 @@ export declare const untypedConfig: {
             readonly color_picker: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../form-entities").ColorPickerInputProps>;
             };
-            readonly file: {
+            readonly file_input: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../form-entities").FileInputProps>;
             };
             readonly label: {
@@ -461,7 +463,7 @@ export declare const untypedConfig: {
             readonly color_picker: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../overview-entities").ColorPickerValueProps>;
             };
-            readonly file: {
+            readonly file_input: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../overview-entities").StringValueProps>;
             };
             readonly label: {

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

@@ -131,7 +131,7 @@ exports.untypedConfig = {
     },
     [core_1.NodeType.Object]: {
         formEntities: {
-            base: { Component: entities_1.ObjectEntity },
+            base: { Component: entities_1.ObjectEntity, independent: true },
             dot_value: { Component: entities_1.DotValue },
             few_of_nested: { Component: entities_1.FewOfNested, independent: true },
             inline: { Component: entities_1.ObjectInline },
@@ -149,7 +149,7 @@ exports.untypedConfig = {
             transparent: { Component: layouts_1.Transparent },
         },
         overviewEntities: {
-            base: { Component: entities_1.ObjectEntity },
+            base: { Component: entities_1.ObjectEntity, independent: true },
             dot_value: { Component: entities_1.DotValue },
             few_of_nested: { Component: entities_1.FewOfNested, independent: true },
             inline: { Component: entities_1.ObjectInline },
@@ -173,7 +173,7 @@ exports.untypedConfig = {
             alert: { Component: entities_1.Alert },
             base: { Component: form_entities_1.StringInput },
             color_picker: { Component: form_entities_1.ColorPickerInput },
-            file: { Component: form_entities_1.FileInput },
+            file_input: { Component: form_entities_1.FileInput },
             label: { Component: entities_1.Label },
             monaco_input: { Component: entities_1.Monaco },
             password: { Component: form_entities_1.PasswordInput },
@@ -197,7 +197,7 @@ exports.untypedConfig = {
             alert: { Component: entities_1.Alert },
             base: { Component: overview_entities_1.StringValue },
             color_picker: { Component: overview_entities_1.ColorPickerValue },
-            file: { Component: overview_entities_1.StringValue },
+            file_input: { Component: overview_entities_1.StringValue },
             label: { Component: entities_1.Label },
             monaco_input: { Component: entities_1.Monaco },
             password: { Component: overview_entities_1.StringValue },

package/build/cjs/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.js

@@ -5,12 +5,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const core_1 = require("../../../core");
 const components_1 = require("../../components");
-const ObjectEntity = ({ headName, mode, input, props, schema, schemaPath, }) => {
+const ObjectEntity = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
     const { name } = input;
-    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
-    if (overviewFlag && !Object.keys(schema.properties || {}).length) {
-        return react_1.default.createElement(components_1.EmptyEntityValue, null);
+    if (!Object.keys(schema.properties || {}).length) {
+        return null;
     }
-    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", fill: "by-child" }, (props.order || Object.keys(schema.properties || {})).map((property) => (react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property })))));
+    let content = (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", fill: "by-child" }, (props.order || Object.keys(schema.properties || {})).map((property) => (react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property })))));
+    if (Layout) {
+        content = (react_1.default.createElement(Layout, { headName: headName, input: input, meta: meta, mode: mode, schema: schema, schemaPath: schemaPath, props: layoutProps || {} }, content));
+    }
+    return content;
 };
 exports.ObjectEntity = ObjectEntity;

package/build/cjs/lib/unstable/kit/entities/ObjectInline/ObjectInline.js

@@ -19,7 +19,7 @@ const ObjectInline = ({ headName, input, mode, props, schema, schemaPath, }) =>
     }
     return (react_1.default.createElement(components_1.EntityContainer, { stretch: overviewFlag ? 'by-child' : 'max', className: b(), fill: "by-child" },
         react_1.default.createElement(uikit_1.Flex, { className: b('items', { overview: overviewFlag }), direction: "row", alignItems: "flex-start", gap: overviewFlag ? 1 : 2 }, (order || Object.keys(schema.properties || {})).map((property, index, array) => (react_1.default.createElement(react_1.default.Fragment, { key: property },
-            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}` }),
+            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property }),
             (0, isString_1.default)(delimiter) && index + 1 !== array.length ? (react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, delimiter)) : null,
             (0, isObject_1.default)(delimiter) && delimiter[property] ? (react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, delimiter[property])) : null))))));
 };

package/build/cjs/lib/unstable/kit/entities/OneOfNested/OneOfNested.js

@@ -72,7 +72,7 @@ const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props,
     }, [name, input, togglerArrayRemoveButton]);
     let content = (react_1.default.createElement(components_1.EntityContainer, { direction: "column-reverse", stretch: "by-child", fill: "populated" },
         togglerValue === undefined ? null : (react_1.default.createElement(components_1.LayoutContainer, { className: b('content', { 'with-indent': withIndent }), hideEmpty: overviewFlag },
-            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${togglerValue}`, schemaPath: `${schemaPath}/properties/${togglerValue}` }))),
+            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${togglerValue}`, schemaPath: `${schemaPath}/properties/${togglerValue}`, key: togglerValue }))),
         toggler));
     if (overviewFlag && Object.values(value || {}).length === 0) {
         content = react_1.default.createElement(react_1.default.Fragment, null, toggler);

package/build/cjs/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js

@@ -30,7 +30,7 @@ const NumberWithScaleInput = ({ input, meta, props, schema, }) => {
                     scale: preparedScale,
                     defaultType,
                     viewType: viewType && preparedScale[viewType] ? [viewType] : [defaultType],
-                    minScaleLength: `${minScaleLength + 42}px`,
+                    minScaleLength: `${minScaleLength + 60}px`,
                 };
             }
         }

package/build/cjs/lib/unstable/kit/form-entities/RangeInput/RangeInput.js

@@ -64,8 +64,8 @@ const RangeInput = ({ headName, input, props, schemaPath, }) => {
     }, [inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey], inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey]]);
     return (react_1.default.createElement(components_1.EntityContainer, { stretch: "max", className: b() },
         react_1.default.createElement(uikit_1.Flex, { className: b('items'), direction: "row", alignItems: "flex-start", gap: 2 },
-            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: fromName, schemaPath: `${schemaPath}/properties/${fromKey}` }),
+            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: fromName, schemaPath: `${schemaPath}/properties/${fromKey}`, key: fromKey }),
             react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, separator),
-            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: toName, schemaPath: `${schemaPath}/properties/${toKey}` }))));
+            react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: toName, schemaPath: `${schemaPath}/properties/${toKey}`, key: toKey }))));
 };
 exports.RangeInput = RangeInput;

package/build/cjs/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js

@@ -31,7 +31,7 @@ const StringNumberWithScaleInput = ({ input, meta, props, schema }) => {
                     scale: preparedScale,
                     defaultType,
                     viewType: viewType && preparedScale[viewType] ? [viewType] : [defaultType],
-                    minScaleLength: `${minScaleLength + 42}px`,
+                    minScaleLength: `${minScaleLength + 60}px`,
                 };
             }
         }

package/build/cjs/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js

@@ -11,6 +11,6 @@ const TextAreaInput = ({ input, meta, props, schema, }) => {
     var _a, _b, _c;
     const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     return (react_1.default.createElement(components_1.EntityContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
-        react_1.default.createElement(uikit_1.TextArea, Object.assign({ maxRows: 20, minRows: 0, placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: (_c = input.value) !== null && _c !== void 0 ? _c : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), qa: input.name }))));
+        react_1.default.createElement(uikit_1.TextArea, Object.assign({ maxRows: 20, minRows: 8, placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: (_c = input.value) !== null && _c !== void 0 ? _c : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), qa: input.name }))));
 };
 exports.TextAreaInput = TextAreaInput;

package/build/cjs/lib/unstable/kit/hooks/index.d.ts

@@ -0,0 +1 @@
+export { type UseExpandedParams, useExpanded } from './useExpanded';

package/build/cjs/lib/unstable/kit/hooks/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpanded = void 0;
+var useExpanded_1 = require("./useExpanded");
+Object.defineProperty(exports, "useExpanded", { enumerable: true, get: function () { return useExpanded_1.useExpanded; } });

package/build/cjs/lib/unstable/kit/hooks/useExpanded.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface UseExpandedParams {
+    headName: string;
+    name: string;
+    open?: boolean;
+}
+export declare const useExpanded: ({ headName, name, open }: UseExpandedParams) => {
+    expanded: boolean;
+    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    toggleExpanded: () => void;
+};

package/build/cjs/lib/unstable/kit/hooks/useExpanded.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpanded = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../core");
+const useExpanded = ({ headName, name, open = true }) => {
+    const srState = (0, core_1.useSchemaRendererState)({
+        headName,
+        subscriptions: [core_1.SchemaRendererEventType.Submit],
+    });
+    const [expanded, setExpanded] = react_1.default.useState(open);
+    const toggleExpanded = react_1.default.useCallback(() => {
+        setExpanded((f) => !f);
+    }, []);
+    react_1.default.useEffect(() => {
+        if (srState &&
+            srState.submitCount > 0 &&
+            Object.keys(srState.errors).some((key) => key.startsWith(name))) {
+            setExpanded(true);
+        }
+    }, [srState]);
+    return { expanded, setExpanded, toggleExpanded };
+};
+exports.useExpanded = useExpanded;

package/build/cjs/lib/unstable/kit/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components';
 export * from './constants';
 export * from './entities';
+export * from './hooks';
 export * from './form-entities';
 export * from './form-layouts';
 export * from './layouts';

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

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./hooks"), exports);
 tslib_1.__exportStar(require("./form-entities"), exports);
 tslib_1.__exportStar(require("./form-layouts"), exports);
 tslib_1.__exportStar(require("./layouts"), exports);

package/build/cjs/lib/unstable/kit/layouts/Accordeon/Accordeon.js

@@ -7,12 +7,14 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../core");
 const components_1 = require("../../components");
+const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('accordeon');
 const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = tslib_1.__rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
     const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { expanded, setExpanded } = (0, hooks_1.useExpanded)({ headName, name: input.name, open });
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
     const summary = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
     const helpMark = react_1.default.useMemo(() => {
@@ -35,7 +37,7 @@ const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) =>
         return react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName });
     }, [overviewFlag, input.name, headName]);
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag, hidden: hidden },
-        react_1.default.createElement(uikit_1.Disclosure, Object.assign({ defaultExpanded: open, summary: summary }, restLayoutProps),
+        react_1.default.createElement(uikit_1.Disclosure, Object.assign({ summary: summary, expanded: expanded, onUpdate: setExpanded }, restLayoutProps),
             react_1.default.createElement(uikit_1.Disclosure.Summary, null, ({ expanded, onClick }, defaultSummary) => (react_1.default.createElement(uikit_1.Flex, { minHeight: "28px", alignItems: "center", gap: 2 },
                 withDefaultSummary ? (defaultSummary) : (react_1.default.createElement(uikit_1.Button, Object.assign({}, togglerProps, { onClick: onClick, className: b('toggler', togglerProps === null || togglerProps === void 0 ? void 0 : togglerProps.className) }),
                     react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2, height: "100%" },

package/build/cjs/lib/unstable/kit/layouts/Card/Card.js

@@ -7,6 +7,7 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../core");
 const components_1 = require("../../components");
+const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('card');
 const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
@@ -14,10 +15,11 @@ const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
     const { descriptionType = 'tooltip', likeAccordeon = true } = props, restLayoutProps = tslib_1.__rest(props, ["descriptionType", "likeAccordeon"]);
     const { copy, required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
-    const [visible, setVisible] = react_1.default.useState(likeAccordeon ? open : true);
-    const toggleVisible = react_1.default.useCallback(() => {
-        setVisible((f) => !f);
-    }, []);
+    const { expanded, toggleExpanded } = (0, hooks_1.useExpanded)({
+        headName,
+        name: input.name,
+        open: likeAccordeon ? open : true,
+    });
     const tooltip = react_1.default.useMemo(() => {
         if (!schema.description || descriptionType === 'bottom') {
             return null;
@@ -33,7 +35,7 @@ const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
     }, [headName, schema.description, descriptionType, overviewFlag]);
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b(), hideEmpty: overviewFlag, hidden: hidden },
         react_1.default.createElement(uikit_1.Card, Object.assign({}, restLayoutProps, { className: b('card') }),
-            react_1.default.createElement("div", { className: b('inner', { hidden: !visible }) },
+            react_1.default.createElement("div", { className: b('inner', { hidden: !expanded }) },
                 react_1.default.createElement(uikit_1.Flex, { className: b('header'), direction: "column", justifyContent: "center" },
                     react_1.default.createElement(uikit_1.Flex, { justifyContent: "space-between", alignItems: "center" },
                         react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2 },
@@ -43,10 +45,10 @@ const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
                             overviewFlag ? (react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
                             overviewFlag ? null : (react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName })),
                             likeAccordeon ? (react_1.default.createElement(uikit_1.Flex, { width: "28px", justifyContent: "center" },
-                                react_1.default.createElement(uikit_1.Button, { onClick: toggleVisible, size: "s", view: "flat-secondary" },
-                                    react_1.default.createElement(uikit_1.Icon, { data: visible ? icons_1.ChevronUp : icons_1.ChevronDown, size: 16 })))) : null)),
+                                react_1.default.createElement(uikit_1.Button, { onClick: toggleExpanded, size: "s", view: "flat-secondary" },
+                                    react_1.default.createElement(uikit_1.Icon, { data: expanded ? icons_1.ChevronUp : icons_1.ChevronDown, size: 16 })))) : null)),
                     bottomDescription),
-                react_1.default.createElement("div", { className: b('content', { hidden: !visible }) }, children)),
+                react_1.default.createElement("div", { className: b('content', { hidden: !expanded }) }, children)),
             overviewFlag ? null : (react_1.default.createElement(components_1.EntityError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) })))));
 };
 exports.Card = Card;

package/build/cjs/lib/unstable/kit/utils/transformer.js

@@ -16,9 +16,9 @@ const viewSpecRules = {
     },
     layout: (spec, mutableSchema) => {
         var _a;
-        const layout = (_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layout;
+        let layout = (_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layout;
         if (!layout) {
-            return;
+            layout = 'transparent';
         }
         if (layout === 'row_verbose') {
             (0, set_1.default)(mutableSchema, 'nodeParameters.layout', 'row');
@@ -335,6 +335,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -380,6 +383,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -425,6 +431,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -471,6 +480,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -506,6 +518,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     (0, set_1.default)(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -542,7 +557,7 @@ const viewSpecRules = {
             (0, set_1.default)(mutableSchema, 'nodeParameters.type', core_2.NodeType.Any);
         }
         else if (((_j = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _j === void 0 ? void 0 : _j.type) === 'file_input') {
-            (0, set_1.default)(mutableSchema, 'nodeParameters.entity', 'file');
+            (0, set_1.default)(mutableSchema, 'nodeParameters.entity', 'file_input');
         }
         else if (((_k = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _k === void 0 ? void 0 : _k.type) === 'monaco_input') {
             (0, set_1.default)(mutableSchema, 'nodeParameters.entity', 'monaco_input');

package/build/esm/lib/unstable/core/constants.d.ts

@@ -11,6 +11,7 @@ export declare enum SchemaRendererEventType {
     Patch = "patch",
     Settings = "settings",
     Schema = "schema",
+    Submit = "submit",
     UserContext = "userContext"
 }
 export declare enum JsonSchemaType {

package/build/esm/lib/unstable/core/constants.js

@@ -13,6 +13,7 @@ export var SchemaRendererEventType;
     SchemaRendererEventType["Patch"] = "patch";
     SchemaRendererEventType["Settings"] = "settings";
     SchemaRendererEventType["Schema"] = "schema";
+    SchemaRendererEventType["Submit"] = "submit";
     SchemaRendererEventType["UserContext"] = "userContext";
 })(SchemaRendererEventType || (SchemaRendererEventType = {}));
 export var JsonSchemaType;

package/build/esm/lib/unstable/core/useSchemaRenderer/types/state.d.ts

@@ -21,6 +21,7 @@ export interface SchemaRendererState<UserContext extends Record<string, unknown>
         coerceInitialValues: boolean;
         jsonDefaultValues: boolean;
     };
+    submitCount: number;
     subscribe: (subscriber: SchemaRendererSubscriber) => string;
     subscribers: {
         byId: Record<string, SchemaRendererSubscriber>;

package/build/esm/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.js

@@ -45,6 +45,7 @@ export const useSchemaRenderer = ({ coerceInitialValues = true, config, connectV
             runValidate,
             settings: { coerceInitialValues, jsonDefaultValues },
             schema: nameUpdated || schemaUpdated ? cloneDeep(originalSchema) : (prevState === null || prevState === void 0 ? void 0 : prevState.schema) || {},
+            submitCount: nameUpdated || schemaUpdated || !prevState ? 0 : prevState.submitCount,
             subscribe,
             subscribers: (prevState === null || prevState === void 0 ? void 0 : prevState.subscribers) || { byId: {}, byName: new Map(), byPath: new Map() },
             unsubscribe,
@@ -114,6 +115,22 @@ export const useSchemaRenderer = ({ coerceInitialValues = true, config, connectV
             initialState.dispatchEvent(initialEvents);
         }
     }, [initialEvents, initialState]);
+    React.useEffect(() => {
+        const originalSubmit = form.submit;
+        form.submit = () => {
+            var _a;
+            const srField = form.getFieldState(getServiceFieldName(SCHEMA_RENDERER_SERVICE_FIELD, headName));
+            const srState = (_a = srField === null || srField === void 0 ? void 0 : srField.data) === null || _a === void 0 ? void 0 : _a.state;
+            if (srState) {
+                srState.submitCount += 1;
+                srState.dispatchEvent([{ type: SchemaRendererEventType.Submit, all: true }]);
+            }
+            return originalSubmit.call(form);
+        };
+        return () => {
+            form.submit = originalSubmit;
+        };
+    }, [form]);
     React.useEffect(() => {
         const strictChecker = strictCheckerRef.current;
         return () => {

package/build/esm/lib/unstable/kit/constants/config.d.ts

@@ -288,6 +288,7 @@ export declare const untypedConfig: {
         readonly formEntities: {
             readonly base: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").ObjectEntityProps>;
+                readonly independent: true;
             };
             readonly dot_value: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").DotValueProps>;
@@ -336,6 +337,7 @@ export declare const untypedConfig: {
         readonly overviewEntities: {
             readonly base: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").ObjectEntityProps>;
+                readonly independent: true;
             };
             readonly dot_value: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaObject, import("../entities").DotValueProps>;
@@ -397,7 +399,7 @@ export declare const untypedConfig: {
             readonly color_picker: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../form-entities").ColorPickerInputProps>;
             };
-            readonly file: {
+            readonly file_input: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../form-entities").FileInputProps>;
             };
             readonly label: {
@@ -461,7 +463,7 @@ export declare const untypedConfig: {
             readonly color_picker: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../overview-entities").ColorPickerValueProps>;
             };
-            readonly file: {
+            readonly file_input: {
                 readonly Component: import("../../core").NodeEntity<import("../../core").JsonSchemaString, import("../overview-entities").StringValueProps>;
             };
             readonly label: {

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

@@ -128,7 +128,7 @@ export const untypedConfig = {
     },
     [NodeType.Object]: {
         formEntities: {
-            base: { Component: ObjectEntity },
+            base: { Component: ObjectEntity, independent: true },
             dot_value: { Component: DotValue },
             few_of_nested: { Component: FewOfNested, independent: true },
             inline: { Component: ObjectInline },
@@ -146,7 +146,7 @@ export const untypedConfig = {
             transparent: { Component: Transparent },
         },
         overviewEntities: {
-            base: { Component: ObjectEntity },
+            base: { Component: ObjectEntity, independent: true },
             dot_value: { Component: DotValue },
             few_of_nested: { Component: FewOfNested, independent: true },
             inline: { Component: ObjectInline },
@@ -170,7 +170,7 @@ export const untypedConfig = {
             alert: { Component: Alert },
             base: { Component: StringInput },
             color_picker: { Component: ColorPickerInput },
-            file: { Component: FileInput },
+            file_input: { Component: FileInput },
             label: { Component: Label },
             monaco_input: { Component: Monaco },
             password: { Component: PasswordInput },
@@ -194,7 +194,7 @@ export const untypedConfig = {
             alert: { Component: Alert },
             base: { Component: StringValue },
             color_picker: { Component: ColorPickerValue },
-            file: { Component: StringValue },
+            file_input: { Component: StringValue },
             label: { Component: Label },
             monaco_input: { Component: Monaco },
             password: { Component: StringValue },

package/build/esm/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { SchemaRendererMode, SchemaRendererNode, } from '../../../core';
-import { EmptyEntityValue, EntityContainer } from '../../components';
-export const ObjectEntity = ({ headName, mode, input, props, schema, schemaPath, }) => {
+import { SchemaRendererNode } from '../../../core';
+import { EntityContainer } from '../../components';
+export const ObjectEntity = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
     const { name } = input;
-    const overviewFlag = mode === SchemaRendererMode.Overview;
-    if (overviewFlag && !Object.keys(schema.properties || {}).length) {
-        return React.createElement(EmptyEntityValue, null);
+    if (!Object.keys(schema.properties || {}).length) {
+        return null;
     }
-    return (React.createElement(EntityContainer, { stretch: "by-child", fill: "by-child" }, (props.order || Object.keys(schema.properties || {})).map((property) => (React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property })))));
+    let content = (React.createElement(EntityContainer, { stretch: "by-child", fill: "by-child" }, (props.order || Object.keys(schema.properties || {})).map((property) => (React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property })))));
+    if (Layout) {
+        content = (React.createElement(Layout, { headName: headName, input: input, meta: meta, mode: mode, schema: schema, schemaPath: schemaPath, props: layoutProps || {} }, content));
+    }
+    return content;
 };

package/build/esm/lib/unstable/kit/entities/ObjectInline/ObjectInline.js

@@ -16,7 +16,7 @@ export const ObjectInline = ({ headName, input, mode, props, schema, schemaPath,
     }
     return (React.createElement(EntityContainer, { stretch: overviewFlag ? 'by-child' : 'max', className: b(), fill: "by-child" },
         React.createElement(Flex, { className: b('items', { overview: overviewFlag }), direction: "row", alignItems: "flex-start", gap: overviewFlag ? 1 : 2 }, (order || Object.keys(schema.properties || {})).map((property, index, array) => (React.createElement(React.Fragment, { key: property },
-            React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}` }),
+            React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property }),
             isString(delimiter) && index + 1 !== array.length ? (React.createElement(Text, { className: b('delimiter') }, delimiter)) : null,
             isObject(delimiter) && delimiter[property] ? (React.createElement(Text, { className: b('delimiter') }, delimiter[property])) : null))))));
 };

package/build/esm/lib/unstable/kit/entities/OneOfNested/OneOfNested.js

@@ -69,7 +69,7 @@ export const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode,
     }, [name, input, togglerArrayRemoveButton]);
     let content = (React.createElement(EntityContainer, { direction: "column-reverse", stretch: "by-child", fill: "populated" },
         togglerValue === undefined ? null : (React.createElement(LayoutContainer, { className: b('content', { 'with-indent': withIndent }), hideEmpty: overviewFlag },
-            React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${togglerValue}`, schemaPath: `${schemaPath}/properties/${togglerValue}` }))),
+            React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${togglerValue}`, schemaPath: `${schemaPath}/properties/${togglerValue}`, key: togglerValue }))),
         toggler));
     if (overviewFlag && Object.values(value || {}).length === 0) {
         content = React.createElement(React.Fragment, null, toggler);

package/build/esm/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js

@@ -28,7 +28,7 @@ export const NumberWithScaleInput = ({ input, meta, props, schema, }) => {
                     scale: preparedScale,
                     defaultType,
                     viewType: viewType && preparedScale[viewType] ? [viewType] : [defaultType],
-                    minScaleLength: `${minScaleLength + 42}px`,
+                    minScaleLength: `${minScaleLength + 60}px`,
                 };
             }
         }

package/build/esm/lib/unstable/kit/form-entities/RangeInput/RangeInput.js

@@ -61,7 +61,7 @@ export const RangeInput = ({ headName, input, props, schemaPath, }) => {
     }, [inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey], inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey]]);
     return (React.createElement(EntityContainer, { stretch: "max", className: b() },
         React.createElement(Flex, { className: b('items'), direction: "row", alignItems: "flex-start", gap: 2 },
-            React.createElement(SchemaRendererNode, { headName: headName, name: fromName, schemaPath: `${schemaPath}/properties/${fromKey}` }),
+            React.createElement(SchemaRendererNode, { headName: headName, name: fromName, schemaPath: `${schemaPath}/properties/${fromKey}`, key: fromKey }),
             React.createElement(Text, { className: b('delimiter') }, separator),
-            React.createElement(SchemaRendererNode, { headName: headName, name: toName, schemaPath: `${schemaPath}/properties/${toKey}` }))));
+            React.createElement(SchemaRendererNode, { headName: headName, name: toName, schemaPath: `${schemaPath}/properties/${toKey}`, key: toKey }))));
 };

package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js

@@ -29,7 +29,7 @@ export const StringNumberWithScaleInput = ({ input, meta, props, schema }) => {
                     scale: preparedScale,
                     defaultType,
                     viewType: viewType && preparedScale[viewType] ? [viewType] : [defaultType],
-                    minScaleLength: `${minScaleLength + 42}px`,
+                    minScaleLength: `${minScaleLength + 60}px`,
                 };
             }
         }

package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js

@@ -8,5 +8,5 @@ export const TextAreaInput = ({ input, meta, props, schema, }) => {
     var _a, _b, _c;
     const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
-        React.createElement(TextArea, Object.assign({ maxRows: 20, minRows: 0, placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: (_c = input.value) !== null && _c !== void 0 ? _c : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: input.name }))));
+        React.createElement(TextArea, Object.assign({ maxRows: 20, minRows: 8, placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: (_c = input.value) !== null && _c !== void 0 ? _c : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: input.name }))));
 };

package/build/esm/lib/unstable/kit/hooks/index.d.ts

@@ -0,0 +1 @@
+export { type UseExpandedParams, useExpanded } from './useExpanded';

package/build/esm/lib/unstable/kit/hooks/index.js

@@ -0,0 +1 @@
+export { useExpanded } from './useExpanded';

package/build/esm/lib/unstable/kit/hooks/useExpanded.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface UseExpandedParams {
+    headName: string;
+    name: string;
+    open?: boolean;
+}
+export declare const useExpanded: ({ headName, name, open }: UseExpandedParams) => {
+    expanded: boolean;
+    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    toggleExpanded: () => void;
+};

package/build/esm/lib/unstable/kit/hooks/useExpanded.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SchemaRendererEventType, useSchemaRendererState } from '../../core';
+export const useExpanded = ({ headName, name, open = true }) => {
+    const srState = useSchemaRendererState({
+        headName,
+        subscriptions: [SchemaRendererEventType.Submit],
+    });
+    const [expanded, setExpanded] = React.useState(open);
+    const toggleExpanded = React.useCallback(() => {
+        setExpanded((f) => !f);
+    }, []);
+    React.useEffect(() => {
+        if (srState &&
+            srState.submitCount > 0 &&
+            Object.keys(srState.errors).some((key) => key.startsWith(name))) {
+            setExpanded(true);
+        }
+    }, [srState]);
+    return { expanded, setExpanded, toggleExpanded };
+};

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

@@ -1,6 +1,7 @@
 export * from './components';
 export * from './constants';
 export * from './entities';
+export * from './hooks';
 export * from './form-entities';
 export * from './form-layouts';
 export * from './layouts';

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

@@ -1,6 +1,7 @@
 export * from './components';
 export * from './constants';
 export * from './entities';
+export * from './hooks';
 export * from './form-entities';
 export * from './form-layouts';
 export * from './layouts';

package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.js

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Button, Disclosure, Flex, HelpMark, Icon, Text, } from '@gravity-ui/uikit';
 import { SchemaRendererMode } from '../../../core';
 import { ArrayRemoveButton, CopyButton, EntityError, HTMLContent, LayoutContainer, } from '../../components';
+import { useExpanded } from '../../hooks';
 import { block, getValidationState } from '../../utils';
 import './Accordeon.css';
 const b = block('accordeon');
@@ -11,6 +12,7 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
     var _a;
     const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = __rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
     const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { expanded, setExpanded } = useExpanded({ headName, name: input.name, open });
     const overviewFlag = mode === SchemaRendererMode.Overview;
     const summary = React.useMemo(() => (React.createElement(Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
     const helpMark = React.useMemo(() => {
@@ -33,7 +35,7 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
         return React.createElement(ArrayRemoveButton, { name: input.name, headName: headName });
     }, [overviewFlag, input.name, headName]);
     return (React.createElement(LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag, hidden: hidden },
-        React.createElement(Disclosure, Object.assign({ defaultExpanded: open, summary: summary }, restLayoutProps),
+        React.createElement(Disclosure, Object.assign({ summary: summary, expanded: expanded, onUpdate: setExpanded }, restLayoutProps),
             React.createElement(Disclosure.Summary, null, ({ expanded, onClick }, defaultSummary) => (React.createElement(Flex, { minHeight: "28px", alignItems: "center", gap: 2 },
                 withDefaultSummary ? (defaultSummary) : (React.createElement(Button, Object.assign({}, togglerProps, { onClick: onClick, className: b('toggler', togglerProps === null || togglerProps === void 0 ? void 0 : togglerProps.className) }),
                     React.createElement(Flex, { alignItems: "center", gap: 2, height: "100%" },

package/build/esm/lib/unstable/kit/layouts/Card/Card.js

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Button, Flex, HelpMark, Icon, Text, Card as UIKitCard, } from '@gravity-ui/uikit';
 import { SchemaRendererMode } from '../../../core';
 import { ArrayRemoveButton, CopyButton, EntityError, HTMLContent, LayoutContainer, } from '../../components';
+import { useExpanded } from '../../hooks';
 import { block, getValidationState } from '../../utils';
 import './Card.css';
 const b = block('card');
@@ -12,10 +13,11 @@ export const Card = ({ children, headName, input, meta, mode, schema, props, })
     const { descriptionType = 'tooltip', likeAccordeon = true } = props, restLayoutProps = __rest(props, ["descriptionType", "likeAccordeon"]);
     const { copy, required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === SchemaRendererMode.Overview;
-    const [visible, setVisible] = React.useState(likeAccordeon ? open : true);
-    const toggleVisible = React.useCallback(() => {
-        setVisible((f) => !f);
-    }, []);
+    const { expanded, toggleExpanded } = useExpanded({
+        headName,
+        name: input.name,
+        open: likeAccordeon ? open : true,
+    });
     const tooltip = React.useMemo(() => {
         if (!schema.description || descriptionType === 'bottom') {
             return null;
@@ -31,7 +33,7 @@ export const Card = ({ children, headName, input, meta, mode, schema, props, })
     }, [headName, schema.description, descriptionType, overviewFlag]);
     return (React.createElement(LayoutContainer, { className: b(), hideEmpty: overviewFlag, hidden: hidden },
         React.createElement(UIKitCard, Object.assign({}, restLayoutProps, { className: b('card') }),
-            React.createElement("div", { className: b('inner', { hidden: !visible }) },
+            React.createElement("div", { className: b('inner', { hidden: !expanded }) },
                 React.createElement(Flex, { className: b('header'), direction: "column", justifyContent: "center" },
                     React.createElement(Flex, { justifyContent: "space-between", alignItems: "center" },
                         React.createElement(Flex, { alignItems: "center", gap: 2 },
@@ -41,9 +43,9 @@ export const Card = ({ children, headName, input, meta, mode, schema, props, })
                             overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
                             overviewFlag ? null : (React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
                             likeAccordeon ? (React.createElement(Flex, { width: "28px", justifyContent: "center" },
-                                React.createElement(Button, { onClick: toggleVisible, size: "s", view: "flat-secondary" },
-                                    React.createElement(Icon, { data: visible ? ChevronUp : ChevronDown, size: 16 })))) : null)),
+                                React.createElement(Button, { onClick: toggleExpanded, size: "s", view: "flat-secondary" },
+                                    React.createElement(Icon, { data: expanded ? ChevronUp : ChevronDown, size: 16 })))) : null)),
                     bottomDescription),
-                React.createElement("div", { className: b('content', { hidden: !visible }) }, children)),
+                React.createElement("div", { className: b('content', { hidden: !expanded }) }, children)),
             overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) })))));
 };

package/build/esm/lib/unstable/kit/utils/transformer.js

@@ -12,9 +12,9 @@ const viewSpecRules = {
     },
     layout: (spec, mutableSchema) => {
         var _a;
-        const layout = (_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layout;
+        let layout = (_a = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layout;
         if (!layout) {
-            return;
+            layout = 'transparent';
         }
         if (layout === 'row_verbose') {
             set(mutableSchema, 'nodeParameters.layout', 'row');
@@ -331,6 +331,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -376,6 +379,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -421,6 +427,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -467,6 +476,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -502,6 +514,9 @@ const viewSpecRules = {
                 if (spec.viewSpec.placeholder) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.placeholder', spec.viewSpec.placeholder);
                 }
+                if (spec.required) {
+                    set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.flags.required', true);
+                }
                 if (spec.description && Object.keys(spec.description).length) {
                     set(mutableSchema, 'nodeParameters.entityProps.toggler.nodeParameters.entityProps.enumDescriptions', spec.description);
                 }
@@ -538,7 +553,7 @@ const viewSpecRules = {
             set(mutableSchema, 'nodeParameters.type', NodeType.Any);
         }
         else if (((_j = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _j === void 0 ? void 0 : _j.type) === 'file_input') {
-            set(mutableSchema, 'nodeParameters.entity', 'file');
+            set(mutableSchema, 'nodeParameters.entity', 'file_input');
         }
         else if (((_k = spec === null || spec === void 0 ? void 0 : spec.viewSpec) === null || _k === void 0 ? void 0 : _k.type) === 'monaco_input') {
             set(mutableSchema, 'nodeParameters.entity', 'monaco_input');

package/package.json

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