@gravity-ui/dynamic-forms 5.30.0 → 5.33.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/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: -1;
+    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/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/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;
+}