@gravity-ui/dynamic-forms 5.30.0 → 5.33.0

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/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/esm/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { useForm } from 'react-final-form';
-import { getArrayItemIndex, getArrayItemParentName, isArrayItem, isTupleItem } from '../../utils';
-export const ArrayRemoveButton = ({ name, headName, onClick }) => {
+import { SchemaRendererMode } from '../../../core';
+import { block, getArrayItemIndex, getArrayItemParentName, isArrayItem, isTupleItem, } from '../../utils';
+const b = block('array-remove-button');
+export const ArrayRemoveButton = ({ mode, name, headName, onClick, }) => {
     const form = useForm();
-    const [ready, setReady] = React.useState(false);
     const arrayItem = isArrayItem(name);
     const tupleItem = isTupleItem(name, headName, form);
+    const overviewFlag = mode === SchemaRendererMode.Overview;
     const removeItem = React.useCallback((event) => {
         var _a;
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -20,11 +22,8 @@ export const ArrayRemoveButton = ({ name, headName, onClick }) => {
             form.blur(parentName);
         }
     }, [form, name, onClick]);
-    React.useLayoutEffect(() => {
-        setReady(true);
-    }, []);
-    if (ready && arrayItem && !tupleItem) {
-        return (React.createElement(Button, { view: "flat-secondary", onClick: removeItem, qa: `${name}-remove-button` },
+    if (arrayItem && !tupleItem && !overviewFlag) {
+        return (React.createElement(Button, { className: b(), view: "flat-secondary", onClick: removeItem, qa: `${name}-remove-button` },
             React.createElement(Icon, { data: TrashBin, size: 16 })));
     }
     return null;

package/build/esm/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/esm/lib/unstable/kit/components/CopyButton/CopyButton.d.ts

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

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

@@ -2,11 +2,15 @@ import React from 'react';
 import { ClipboardButton } from '@gravity-ui/uikit';
 import isNumber from 'lodash/isNumber';
 import isString from 'lodash/isString';
+import { SchemaRendererMode } from '../../../core';
 import { block } from '../../utils';
 import './CopyButton.css';
 const b = block('copy-button');
-export const CopyButton = ({ className, copy, value }) => {
-    if (copy && (isString(value) || isNumber(value))) {
+export const CopyButton = ({ className, mode, schema, value }) => {
+    var _a;
+    const { copy } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const overviewFlag = mode === SchemaRendererMode.Overview;
+    if (copy && (isString(value) || isNumber(value)) && overviewFlag) {
         return (React.createElement("div", { className: b(null, className) },
             React.createElement(ClipboardButton, { text: String(value), view: "flat", size: "s" })));
     }

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type FieldValue, type JsonSchema, SchemaRendererMode } from '../../../core';
+import './DropButton.css';
+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/esm/lib/unstable/kit/components/DropButton/DropButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { unstable_Menu as Menu, unstable_MenuItem as MenuItem, unstable_MenuTrigger as MenuTrigger, } from '@gravity-ui/uikit/unstable';
+import { useForm } from 'react-final-form';
+import i18n from '../../../../kit/i18n';
+import { SchemaRendererMode } from '../../../core';
+import { block, isArrayItem } from '../../utils';
+import './DropButton.css';
+const b = block('drop-button');
+export const DropButton = ({ mode, name, onClick, schema, value }) => {
+    var _a;
+    const form = useForm();
+    const [open, setOpen] = React.useState(false);
+    const { required } = ((_a = schema === null || schema === void 0 ? void 0 : schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const arrayItem = isArrayItem(name);
+    const overviewFlag = mode === SchemaRendererMode.Overview;
+    const removeItem = React.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.createElement("div", { className: b({ open }) },
+            React.createElement(Menu, { trigger: React.createElement(MenuTrigger, { view: "flat-secondary" }), onOpenChange: setOpen, placement: "right" },
+                React.createElement(MenuItem, { theme: "danger", onClick: removeItem }, i18n('label_delete')))));
+    }
+    return null;
+};

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

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

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

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

package/build/esm/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/esm/lib/unstable/kit/components/EntityContainer/EntityContainer.d.ts

@@ -3,6 +3,7 @@ import { type FlexProps } from '@gravity-ui/uikit';
 import './EntityContainer.css';
 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/esm/lib/unstable/kit/components/EntityContainer/EntityContainer.js

@@ -5,7 +5,7 @@ import { block } from '../../utils';
 import './EntityContainer.css';
 const b = block('entity-container');
 export const EntityContainer = (_a) => {
-    var { children, fill, stretch } = _a, restFlexProps = __rest(_a, ["children", "fill", "stretch"]);
-    return (React.createElement("div", { className: b({ stretch }), "data-stretch": stretch, "data-fill": fill },
+    var { children, droppable, fill, stretch } = _a, restFlexProps = __rest(_a, ["children", "droppable", "fill", "stretch"]);
+    return (React.createElement("div", { className: b({ stretch }), "data-fill": fill, "data-droppable": droppable, "data-stretch": stretch },
         React.createElement(Flex, Object.assign({ direction: "column", minWidth: 0 }, restFlexProps, { grow: 1 }), children)));
 };

package/build/esm/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/esm/lib/unstable/kit/components/LayoutButtons/LayoutButtons.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ArrayRemoveButton } from '../ArrayRemoveButton';
+import { CopyButton } from '../CopyButton';
+import { DropButton } from '../DropButton';
+export const LayoutButtons = ({ mode, name, headName, schema, value, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ArrayRemoveButton, { mode: mode, name: name, headName: headName }),
+        React.createElement(CopyButton, { mode: mode, schema: schema, value: value }),
+        React.createElement(DropButton, { mode: mode, name: name, schema: schema, value: value })));
+};

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

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

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

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

package/build/esm/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/esm/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/esm/lib/unstable/kit/components/index.js

@@ -1,9 +1,11 @@
 export { ArrayRemoveButton } from './ArrayRemoveButton';
 export { CopyButton } from './CopyButton';
+export { DropButton } from './DropButton';
 export { EmptyEntityValue } from './EmptyEntityValue';
 export { EntityContainer } from './EntityContainer';
 export { EntityError } from './EntityError';
 export { HTMLContent } from './HTMLContent';
 export { LayoutContainer } from './LayoutContainer';
+export { LayoutButtons } from './LayoutButtons';
 export { LongValue } from './LongValue';
 export { MonacoContainer } from './MonacoContainer';

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/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/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.js

@@ -9,8 +9,37 @@ const b = block('array-entity');
 export 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 === SchemaRendererMode.Overview;
+    const initButton = React.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.createElement(Button, { className: b('init-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-init-button` },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        required,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
     const addButton = React.useMemo(() => {
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema) || overviewFlag) {
@@ -18,7 +47,7 @@ export 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.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-add-button` },
@@ -49,7 +78,7 @@ export const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath,
     if (overviewFlag && !(value === null || value === void 0 ? void 0 : value.length)) {
         return React.createElement(EmptyEntityValue, null);
     }
-    return (React.createElement(EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child" },
+    return (React.createElement(EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child", droppable: true }, initButton ? (initButton) : (React.createElement(React.Fragment, null,
         (items === null || items === void 0 ? void 0 : items.length) ? React.createElement(Flex, { direction: "column" }, items) : null,
-        addButton));
+        addButton))));
 };

package/build/esm/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/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.js

@@ -2,15 +2,44 @@ import React from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Button, HelpMark, Icon, Text } from '@gravity-ui/uikit';
 import { SchemaRendererMode, SchemaRendererNode, } from '../../../core';
-import { ArrayRemoveButton, EmptyEntityValue, EntityContainer, HTMLContent } from '../../components';
+import { ArrayRemoveButton, EmptyEntityValue, EntityContainer, HTMLContent, LayoutContainer, } from '../../components';
 import { block } from '../../utils';
 import './ArrayTable.css';
 const b = block('array-table');
 export 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 === SchemaRendererMode.Overview;
+    const initButton = React.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.createElement(Button, { className: b('init-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-init-button` },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        required,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
     const addButton = React.useMemo(() => {
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema) || overviewFlag) {
@@ -18,7 +47,7 @@ export 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.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-add-button` },
@@ -80,21 +109,24 @@ export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }
                         wIndex + 1 === array.length && column.schema.description ? (React.createElement(HelpMark, null,
                             React.createElement(HTMLContent, { content: column.schema.description, headName: headName }))) : null))))));
             })));
-        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (React.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
-            React.createElement("div", { className: b('cell') },
-                React.createElement(Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
-            columns.map((column, cIndex) => (React.createElement("div", { className: b('cell'), key: cIndex },
-                React.createElement(SchemaRendererNode, { headName: headName, name: getItemName(rIndex, column.name), schemaPath: getItemSchemaPath(rIndex, column.name) })))),
-            withRemoveButton ? (React.createElement("div", { className: b('cell') },
-                React.createElement(ArrayRemoveButton, { name: `${name}[${rIndex}]`, headName: headName }))) : null)));
+        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (React.createElement(React.Fragment, { key: rIndex },
+            React.createElement("div", { className: b('row-divider') }),
+            React.createElement(LayoutContainer, null,
+                React.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length } },
+                    React.createElement("div", { className: b('cell') },
+                        React.createElement(Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
+                    columns.map((column, cIndex) => (React.createElement("div", { className: b('cell'), key: cIndex },
+                        React.createElement(SchemaRendererNode, { headName: headName, name: getItemName(rIndex, column.name), schemaPath: getItemSchemaPath(rIndex, column.name) })))),
+                    withRemoveButton ? (React.createElement("div", { className: b('cell') },
+                        React.createElement(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.createElement(EmptyEntityValue, null);
     }
-    return (React.createElement(EntityContainer, { stretch: "by-child", gap: 2, fill: "by-child" },
-        React.createElement("div", null,
-            rows.length ? head : null,
-            rows),
-        addButton));
+    return (React.createElement(EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child", droppable: true }, initButton ? (initButton) : (React.createElement(React.Fragment, null,
+        rows.length ? (React.createElement("div", null,
+            head,
+            rows)) : null,
+        addButton))));
 };

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

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

package/build/esm/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.d.ts

@@ -1,4 +1,5 @@
 import { type JsonSchemaObject, type NodeEntity } from '../../../core';
+import './ObjectEntity.css';
 export interface ObjectEntityProps {
     order?: string[];
 }