@gravity-ui/dynamic-forms 5.32.0 → 5.33.1

package/build/cjs/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { SchemaRendererMode } from '../../../core';
 export interface ArrayRemoveButtonProps {
+    mode: SchemaRendererMode;
     name: string;
     headName: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/build/cjs/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.js

@@ -6,12 +6,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const react_final_form_1 = require("react-final-form");
+const core_1 = require("../../../core");
 const utils_1 = require("../../utils");
-const ArrayRemoveButton = ({ name, headName, onClick }) => {
+const b = (0, utils_1.block)('array-remove-button');
+const ArrayRemoveButton = ({ mode, name, headName, onClick, }) => {
     const form = (0, react_final_form_1.useForm)();
-    const [ready, setReady] = react_1.default.useState(false);
     const arrayItem = (0, utils_1.isArrayItem)(name);
     const tupleItem = (0, utils_1.isTupleItem)(name, headName, form);
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
     const removeItem = react_1.default.useCallback((event) => {
         var _a;
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -24,11 +26,8 @@ const ArrayRemoveButton = ({ name, headName, onClick }) => {
             form.blur(parentName);
         }
     }, [form, name, onClick]);
-    react_1.default.useLayoutEffect(() => {
-        setReady(true);
-    }, []);
-    if (ready && arrayItem && !tupleItem) {
-        return (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: removeItem, qa: `${name}-remove-button` },
+    if (arrayItem && !tupleItem && !overviewFlag) {
+        return (react_1.default.createElement(uikit_1.Button, { className: b(), view: "flat-secondary", onClick: removeItem, qa: `${name}-remove-button` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 })));
     }
     return null;

package/build/cjs/lib/unstable/kit/components/CopyButton/CopyButton.css

@@ -1,4 +1,5 @@
 .sr-copy-button {
+  display: none;
   width: 20px;
   height: 20px;
   margin-top: -1px;

package/build/cjs/lib/unstable/kit/components/CopyButton/CopyButton.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { type JsonSchema, SchemaRendererMode } from '../../../core';
 export interface CopyButtonProps {
     className?: string;
-    copy?: boolean;
+    mode: SchemaRendererMode;
+    schema: JsonSchema;
     value: unknown;
 }
 export declare const CopyButton: React.FC<CopyButtonProps>;

package/build/cjs/lib/unstable/kit/components/CopyButton/CopyButton.js

@@ -6,10 +6,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const isNumber_1 = tslib_1.__importDefault(require("lodash/isNumber"));
 const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const core_1 = require("../../../core");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('copy-button');
-const CopyButton = ({ className, copy, value }) => {
-    if (copy && ((0, isString_1.default)(value) || (0, isNumber_1.default)(value))) {
+const CopyButton = ({ className, mode, schema, value }) => {
+    var _a;
+    const { copy } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    if (copy && ((0, isString_1.default)(value) || (0, isNumber_1.default)(value)) && overviewFlag) {
         return (react_1.default.createElement("div", { className: b(null, className) },
             react_1.default.createElement(uikit_1.ClipboardButton, { text: String(value), view: "flat", size: "s" })));
     }

package/build/cjs/lib/unstable/kit/components/DropButton/DropButton.css

@@ -0,0 +1,3 @@
+.sr-drop-button {
+  display: none;
+}

package/build/cjs/lib/unstable/kit/components/DropButton/DropButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type FieldValue, type JsonSchema, SchemaRendererMode } from '../../../core';
+export interface DropButtonProps {
+    mode: SchemaRendererMode;
+    name: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    schema?: JsonSchema;
+    value: FieldValue;
+}
+export declare const DropButton: React.FC<DropButtonProps>;

package/build/cjs/lib/unstable/kit/components/DropButton/DropButton.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const unstable_1 = require("@gravity-ui/uikit/unstable");
+const react_final_form_1 = require("react-final-form");
+const i18n_1 = tslib_1.__importDefault(require("../../../../kit/i18n"));
+const core_1 = require("../../../core");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('drop-button');
+const DropButton = ({ mode, name, onClick, schema, value }) => {
+    var _a;
+    const form = (0, react_final_form_1.useForm)();
+    const [open, setOpen] = react_1.default.useState(false);
+    const { required } = ((_a = schema === null || schema === void 0 ? void 0 : schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const arrayItem = (0, utils_1.isArrayItem)(name);
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    const removeItem = react_1.default.useCallback((event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        form.focus(name);
+        form.change(name, undefined);
+        form.blur(name);
+    }, [form, name, onClick]);
+    if (!required && value !== undefined && !arrayItem && !overviewFlag) {
+        return (react_1.default.createElement("div", { className: b({ open }) },
+            react_1.default.createElement(unstable_1.unstable_Menu, { trigger: react_1.default.createElement(unstable_1.unstable_MenuTrigger, { view: "flat-secondary" }), onOpenChange: setOpen, placement: "right" },
+                react_1.default.createElement(unstable_1.unstable_MenuItem, { theme: "danger", onClick: removeItem }, (0, i18n_1.default)('label_delete')))));
+    }
+    return null;
+};
+exports.DropButton = DropButton;

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

@@ -0,0 +1 @@
+export { DropButton, type DropButtonProps } from './DropButton';

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

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

package/build/cjs/lib/unstable/kit/components/EntityContainer/EntityContainer.css

@@ -13,6 +13,7 @@
   flex: 0 1 auto;
 }
 .sr-entity-container_stretch_by-child {
+  max-width: 100%;
   width: fit-content;
   flex: 0 0 auto;
 }

package/build/cjs/lib/unstable/kit/components/EntityContainer/EntityContainer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type FlexProps } from '@gravity-ui/uikit';
 export interface EntityContainerProps extends FlexProps {
     children: React.ReactNode;
+    droppable?: boolean;
     fill?: 'populated' | 'empty' | 'by-child';
     ref?: React.ComponentPropsWithRef<'div'>['ref'];
     stretch: 'max' | 'fit' | 'by-child';

package/build/cjs/lib/unstable/kit/components/EntityContainer/EntityContainer.js

@@ -7,8 +7,8 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('entity-container');
 const EntityContainer = (_a) => {
-    var { children, fill, stretch } = _a, restFlexProps = tslib_1.__rest(_a, ["children", "fill", "stretch"]);
-    return (react_1.default.createElement("div", { className: b({ stretch }), "data-stretch": stretch, "data-fill": fill },
+    var { children, droppable, fill, stretch } = _a, restFlexProps = tslib_1.__rest(_a, ["children", "droppable", "fill", "stretch"]);
+    return (react_1.default.createElement("div", { className: b({ stretch }), "data-fill": fill, "data-droppable": droppable, "data-stretch": stretch },
         react_1.default.createElement(uikit_1.Flex, Object.assign({ direction: "column", minWidth: 0 }, restFlexProps, { grow: 1 }), children)));
 };
 exports.EntityContainer = EntityContainer;

package/build/cjs/lib/unstable/kit/components/LayoutButtons/LayoutButtons.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FieldValue, JsonSchema, SchemaRendererMode } from '../../../core';
+export interface LayoutButtonsProps {
+    name: string;
+    headName: string;
+    mode: SchemaRendererMode;
+    schema: JsonSchema;
+    value: FieldValue;
+}
+export declare const LayoutButtons: React.FC<LayoutButtonsProps>;

package/build/cjs/lib/unstable/kit/components/LayoutButtons/LayoutButtons.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutButtons = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ArrayRemoveButton_1 = require("../ArrayRemoveButton");
+const CopyButton_1 = require("../CopyButton");
+const DropButton_1 = require("../DropButton");
+const LayoutButtons = ({ mode, name, headName, schema, value, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ArrayRemoveButton_1.ArrayRemoveButton, { mode: mode, name: name, headName: headName }),
+        react_1.default.createElement(CopyButton_1.CopyButton, { mode: mode, schema: schema, value: value }),
+        react_1.default.createElement(DropButton_1.DropButton, { mode: mode, name: name, schema: schema, value: value })));
+};
+exports.LayoutButtons = LayoutButtons;

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

@@ -0,0 +1 @@
+export { LayoutButtons, type LayoutButtonsProps } from './LayoutButtons';

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

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

package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.css

@@ -1,6 +1,8 @@
 .sr-layout-container {
+  max-width: 100%;
+  min-width: 0;
   width: fit-content;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
 }
 .sr-layout-container:has([data-stretch=max]) {
   width: 100%;
@@ -11,4 +13,31 @@
 }
 .sr-layout-container_hidden {
   display: none;
+}
+
+@scope (.sr-layout-container) to (.sr-layout-container) {
+  :scope:has([data-droppable=true]:not(:scope .sr-layout-container *)) .sr-drop-button {
+    display: block;
+  }
+  :scope:has(.sr-drop-button:not(:scope .sr-layout-container *):hover),
+  :scope:has(.sr-drop-button_open:not(:scope .sr-layout-container *)),
+  :scope:has(.sr-array-remove-button:not(:scope .sr-layout-container *):hover) {
+    position: relative;
+  }
+  :scope:has(.sr-drop-button:not(:scope .sr-layout-container *):hover):before,
+  :scope:has(.sr-drop-button_open:not(:scope .sr-layout-container *)):before,
+  :scope:has(.sr-array-remove-button:not(:scope .sr-layout-container *):hover):before {
+    content: "";
+    z-index: 0;
+    position: absolute;
+    top: -8px;
+    left: -8px;
+    width: calc(100% + 16px);
+    height: calc(100% + 16px);
+    background-color: var(--g-color-base-simple-hover);
+    border-radius: 6px;
+  }
+  :scope:hover .sr-copy-button {
+    display: block;
+  }
 }

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

@@ -1,9 +1,11 @@
 export { ArrayRemoveButton, type ArrayRemoveButtonProps } from './ArrayRemoveButton';
 export { CopyButton, type CopyButtonProps } from './CopyButton';
+export { DropButton, type DropButtonProps } from './DropButton';
 export { EmptyEntityValue } from './EmptyEntityValue';
 export { EntityContainer, type EntityContainerProps } from './EntityContainer';
 export { EntityError, type EntityErrorProps } from './EntityError';
 export { HTMLContent, type HTMLContentProps } from './HTMLContent';
 export { LayoutContainer, type LayoutContainerProps } from './LayoutContainer';
+export { LayoutButtons, type LayoutButtonsProps } from './LayoutButtons';
 export { LongValue, type LongValueProps } from './LongValue';
 export { MonacoContainer, type MonacoContainerProps } from './MonacoContainer';

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonacoContainer = exports.LongValue = exports.LayoutContainer = exports.HTMLContent = exports.EntityError = exports.EntityContainer = exports.EmptyEntityValue = exports.CopyButton = exports.ArrayRemoveButton = void 0;
+exports.MonacoContainer = exports.LongValue = exports.LayoutButtons = exports.LayoutContainer = exports.HTMLContent = exports.EntityError = exports.EntityContainer = exports.EmptyEntityValue = exports.DropButton = exports.CopyButton = exports.ArrayRemoveButton = void 0;
 var ArrayRemoveButton_1 = require("./ArrayRemoveButton");
 Object.defineProperty(exports, "ArrayRemoveButton", { enumerable: true, get: function () { return ArrayRemoveButton_1.ArrayRemoveButton; } });
 var CopyButton_1 = require("./CopyButton");
 Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return CopyButton_1.CopyButton; } });
+var DropButton_1 = require("./DropButton");
+Object.defineProperty(exports, "DropButton", { enumerable: true, get: function () { return DropButton_1.DropButton; } });
 var EmptyEntityValue_1 = require("./EmptyEntityValue");
 Object.defineProperty(exports, "EmptyEntityValue", { enumerable: true, get: function () { return EmptyEntityValue_1.EmptyEntityValue; } });
 var EntityContainer_1 = require("./EntityContainer");
@@ -15,6 +17,8 @@ var HTMLContent_1 = require("./HTMLContent");
 Object.defineProperty(exports, "HTMLContent", { enumerable: true, get: function () { return HTMLContent_1.HTMLContent; } });
 var LayoutContainer_1 = require("./LayoutContainer");
 Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return LayoutContainer_1.LayoutContainer; } });
+var LayoutButtons_1 = require("./LayoutButtons");
+Object.defineProperty(exports, "LayoutButtons", { enumerable: true, get: function () { return LayoutButtons_1.LayoutButtons; } });
 var LongValue_1 = require("./LongValue");
 Object.defineProperty(exports, "LongValue", { enumerable: true, get: function () { return LongValue_1.LongValue; } });
 var MonacoContainer_1 = require("./MonacoContainer");

package/build/cjs/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.css

@@ -1,3 +1,3 @@
-.sr-array-entity__add-button {
+.sr-array-entity__add-button, .sr-array-entity__init-button {
   align-self: flex-start;
 }

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

@@ -12,8 +12,37 @@ const b = (0, utils_1.block)('array-entity');
 const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath, }) => {
     var _a;
     const { name, onBlur, onChange, onFocus, value } = input;
-    const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { disabled, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    const initButton = react_1.default.useMemo(() => {
+        if (required || value !== undefined || overviewFlag) {
+            return null;
+        }
+        const itemsSchema = schema.items;
+        const initValue = Array.isArray(itemsSchema)
+            ? itemsSchema.map(() => undefined)
+            : [undefined];
+        const onClick = () => {
+            onFocus();
+            onChange(initValue);
+            onBlur();
+        };
+        return (react_1.default.createElement(uikit_1.Button, { className: b('init-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-init-button` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        required,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
     const addButton = react_1.default.useMemo(() => {
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema) || overviewFlag) {
@@ -21,7 +50,7 @@ const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath, }) => {
         }
         const onClick = () => {
             onFocus();
-            onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
+            onChange([...(value || []), undefined]);
             onBlur();
         };
         return (react_1.default.createElement(uikit_1.Button, { className: b('add-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-add-button` },
@@ -52,8 +81,8 @@ const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath, }) => {
     if (overviewFlag && !(value === null || value === void 0 ? void 0 : value.length)) {
         return react_1.default.createElement(components_1.EmptyEntityValue, null);
     }
-    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child" },
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child", droppable: true }, initButton ? (initButton) : (react_1.default.createElement(react_1.default.Fragment, null,
         (items === null || items === void 0 ? void 0 : items.length) ? react_1.default.createElement(uikit_1.Flex, { direction: "column" }, items) : null,
-        addButton));
+        addButton))));
 };
 exports.ArrayEntity = ArrayEntity;

package/build/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.css

@@ -1,11 +1,21 @@
+.sr-array-table__row-divider {
+  width: 100%;
+  height: calc(var(--g-spacing-base) * 5 + 1px);
+  display: flex;
+  align-items: center;
+}
+.sr-array-table__row-divider::before {
+  content: "";
+  width: 100%;
+  height: 1px;
+  background-color: var(--g-color-line-generic);
+}
 .sr-array-table__row {
   width: 100%;
   display: grid;
   align-items: start;
   grid-template-columns: 28px repeat(var(--columns-count), 1fr);
   gap: calc(var(--g-spacing-base) * 3);
-  padding: calc(var(--g-spacing-base) * 2) 0;
-  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .sr-array-table__row_head {
   align-items: center;
@@ -40,6 +50,6 @@
   gap: 0 calc(var(--g-spacing-base) * 1);
   flex-wrap: wrap;
 }
-.sr-array-table__add-button {
+.sr-array-table__add-button, .sr-array-table__init-button {
   align-self: flex-start;
 }

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

@@ -12,8 +12,37 @@ const b = (0, utils_1.block)('array-table');
 const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
     var _a;
     const { name, onBlur, onChange, onFocus, value } = input;
-    const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { disabled, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    const initButton = react_1.default.useMemo(() => {
+        if (required || value !== undefined || overviewFlag) {
+            return null;
+        }
+        const itemsSchema = schema.items;
+        const initValue = Array.isArray(itemsSchema)
+            ? itemsSchema.map(() => undefined)
+            : [undefined];
+        const onClick = () => {
+            onFocus();
+            onChange(initValue);
+            onBlur();
+        };
+        return (react_1.default.createElement(uikit_1.Button, { className: b('init-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-init-button` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        required,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
     const addButton = react_1.default.useMemo(() => {
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema) || overviewFlag) {
@@ -21,7 +50,7 @@ const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
         }
         const onClick = () => {
             onFocus();
-            onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
+            onChange([...(value || []), undefined]);
             onBlur();
         };
         return (react_1.default.createElement(uikit_1.Button, { className: b('add-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-add-button` },
@@ -83,22 +112,25 @@ const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
                         wIndex + 1 === array.length && column.schema.description ? (react_1.default.createElement(uikit_1.HelpMark, null,
                             react_1.default.createElement(components_1.HTMLContent, { content: column.schema.description, headName: headName }))) : null))))));
             })));
-        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (react_1.default.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
-            react_1.default.createElement("div", { className: b('cell') },
-                react_1.default.createElement(uikit_1.Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
-            columns.map((column, cIndex) => (react_1.default.createElement("div", { className: b('cell'), key: cIndex },
-                react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: getItemName(rIndex, column.name), schemaPath: getItemSchemaPath(rIndex, column.name) })))),
-            withRemoveButton ? (react_1.default.createElement("div", { className: b('cell') },
-                react_1.default.createElement(components_1.ArrayRemoveButton, { name: `${name}[${rIndex}]`, headName: headName }))) : null)));
+        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (react_1.default.createElement(react_1.default.Fragment, { key: rIndex },
+            react_1.default.createElement("div", { className: b('row-divider') }),
+            react_1.default.createElement(components_1.LayoutContainer, null,
+                react_1.default.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length } },
+                    react_1.default.createElement("div", { className: b('cell') },
+                        react_1.default.createElement(uikit_1.Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
+                    columns.map((column, cIndex) => (react_1.default.createElement("div", { className: b('cell'), key: cIndex },
+                        react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: getItemName(rIndex, column.name), schemaPath: getItemSchemaPath(rIndex, column.name) })))),
+                    withRemoveButton ? (react_1.default.createElement("div", { className: b('cell') },
+                        react_1.default.createElement(components_1.ArrayRemoveButton, { name: `${name}[${rIndex}]`, headName: headName, mode: mode }))) : null)))));
         return { head, rows };
-    }, [columns, headName, name, overviewFlag, schema.items, schemaPath, value === null || value === void 0 ? void 0 : value.length]);
+    }, [columns, headName, mode, name, overviewFlag, schema.items, schemaPath, value === null || value === void 0 ? void 0 : value.length]);
     if (overviewFlag && !(value === null || value === void 0 ? void 0 : value.length)) {
         return react_1.default.createElement(components_1.EmptyEntityValue, null);
     }
-    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 2, fill: "by-child" },
-        react_1.default.createElement("div", null,
-            rows.length ? head : null,
-            rows),
-        addButton));
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child", droppable: true }, initButton ? (initButton) : (react_1.default.createElement(react_1.default.Fragment, null,
+        rows.length ? (react_1.default.createElement("div", null,
+            head,
+            rows)) : null,
+        addButton))));
 };
 exports.ArrayTable = ArrayTable;

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

@@ -0,0 +1,3 @@
+.sr-object-entity__init-button {
+  align-self: flex-start;
+}

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

@@ -3,14 +3,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectEntity = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../core");
 const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('object-entity');
 const ObjectEntity = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
+    var _a;
+    const { onFocus, onChange, onBlur, value } = input;
+    const { disabled, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
     const { name } = input;
+    const initButton = react_1.default.useMemo(() => {
+        if (required || value !== undefined || overviewFlag) {
+            return null;
+        }
+        const onClick = () => {
+            onFocus();
+            onChange({});
+            onBlur();
+        };
+        return (react_1.default.createElement(uikit_1.Button, { className: b('init-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-init-button` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            schema.title || null));
+    }, [
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        required,
+        schema.title,
+        schema.readOnly,
+        value,
+    ]);
     if (!Object.keys(schema.properties || {}).length) {
         return null;
     }
-    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 })))));
+    let content = (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", fill: "by-child", droppable: true }, initButton ? (initButton) : (react_1.default.createElement(react_1.default.Fragment, null, (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));
     }

package/build/cjs/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.css

@@ -1,9 +1,7 @@
-.sr-radio-group-input_direction_horizontal {
+.sr-radio-group-input .g-radio-group .g-control-label.g-radio-group__option {
   min-height: 28px;
-  padding-top: 1px;
-}
-.sr-radio-group-input_direction_vertical {
-  padding-top: 7px;
+  align-items: center;
+  margin-bottom: 0;
 }
 .sr-radio-group-input_error .g-radio-group .g-radio_checked .g-radio__indicator:hover::before {
   border: 1px solid var(--g-color-text-danger);

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

@@ -20,7 +20,7 @@ const RadioGroupInput = ({ input, meta, props, schema, }) => {
             disabled: optionsDisabled === null || optionsDisabled === void 0 ? void 0 : optionsDisabled[value],
         }));
     }, [enumDescriptions, optionsDisabled, schema.enum]);
-    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "fit", className: b({ error: (0, utils_1.getBooleanValidationState)(meta), direction }), justifyContent: "center" },
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "fit", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }), justifyContent: "center" },
         react_1.default.createElement(uikit_1.RadioGroup, Object.assign({ options: options, disabled: disabled || schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, direction: direction, qa: name }))));
 };
 exports.RadioGroupInput = RadioGroupInput;

package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css

@@ -1,5 +1,6 @@
 .sr-segmented-radio-group-input {
   position: relative;
+  overflow: hidden;
 }
 .sr-segmented-radio-group-input_error .g-segmented-radio-group .g-segmented-radio-group__option_checked:hover::after {
   border: 1px solid var(--g-color-text-danger);

package/build/cjs/lib/unstable/kit/form-layouts/FormColumn/FormColumn.css

@@ -4,14 +4,14 @@
 .sr-form-column:last-child {
   margin-bottom: 0;
 }
-.sr-form-column__top {
+.sr-form-column__title {
   display: inline;
 }
-.sr-form-column__title {
+.sr-form-column__title-text {
   min-height: 18px;
   margin-right: calc(var(--g-spacing-base) * 1);
 }
-.sr-form-column__title_required::after {
+.sr-form-column__title-text_required::after {
   content: "*";
   margin-left: calc(var(--g-spacing-base) * 1);
   color: var(--g-color-text-danger);

package/build/cjs/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js

@@ -7,7 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('form-column');
-const FormColumn = ({ children, headName, input, meta, schema, props, }) => {
+const FormColumn = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { hidden, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const tooltip = react_1.default.useMemo(() => {
@@ -25,10 +25,11 @@ const FormColumn = ({ children, headName, input, meta, schema, props, }) => {
     }, [headName, schema.description, props.descriptionType]);
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b(), gap: 2, hidden: hidden },
         react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 0.5 },
-            react_1.default.createElement("div", { className: b('top') },
-                react_1.default.createElement(uikit_1.Text, { className: b('title', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
-                tooltip,
-                react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName })),
+            react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2 },
+                react_1.default.createElement("div", { className: b('title') },
+                    react_1.default.createElement(uikit_1.Text, { className: b('title-text', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
+                    tooltip),
+                react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
             bottomDescription),
         react_1.default.createElement(uikit_1.Flex, { className: b('bottom'), direction: "column", gap: 0.5 },
             children,

package/build/cjs/lib/unstable/kit/form-layouts/FormRow/FormRow.js

@@ -7,7 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('form-row');
-const FormRow = ({ children, headName, input, meta, schema, props, }) => {
+const FormRow = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { hidden, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const tooltip = react_1.default.useMemo(() => {
@@ -30,7 +30,7 @@ const FormRow = ({ children, headName, input, meta, schema, props, }) => {
         react_1.default.createElement(uikit_1.Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
             react_1.default.createElement(uikit_1.Flex, { grow: 1, gap: 2 },
                 children,
-                react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName })),
+                react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
             bottomDescription,
             react_1.default.createElement(components_1.EntityError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) }))));
 };