@gravity-ui/dynamic-forms 5.32.0 → 5.33.1

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[];
 }

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

@@ -1,12 +1,45 @@
 import React from 'react';
-import { SchemaRendererNode } from '../../../core';
+import { Plus } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { SchemaRendererMode, SchemaRendererNode, } from '../../../core';
 import { EntityContainer } from '../../components';
+import { block } from '../../utils';
+import './ObjectEntity.css';
+const b = block('object-entity');
 export 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 === SchemaRendererMode.Overview;
     const { name } = input;
+    const initButton = React.useMemo(() => {
+        if (required || value !== undefined || overviewFlag) {
+            return null;
+        }
+        const onClick = () => {
+            onFocus();
+            onChange({});
+            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 }),
+            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.createElement(EntityContainer, { stretch: "by-child", fill: "by-child" }, (props.order || Object.keys(schema.properties || {})).map((property) => (React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property })))));
+    let content = (React.createElement(EntityContainer, { stretch: "by-child", fill: "by-child", droppable: true }, initButton ? (initButton) : (React.createElement(React.Fragment, null, (props.order || Object.keys(schema.properties || {})).map((property) => (React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${property}`, schemaPath: `${schemaPath}/properties/${property}`, key: property })))))));
     if (Layout) {
         content = (React.createElement(Layout, { headName: headName, input: input, meta: meta, mode: mode, schema: schema, schemaPath: schemaPath, props: layoutProps || {} }, content));
     }

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

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

package/build/esm/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/esm/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/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
-import { ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer } from '../../components';
+import { EntityError, HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { block, getValidationState } from '../../utils';
 import './FormColumn.css';
 const b = block('form-column');
-export const FormColumn = ({ children, headName, input, meta, schema, props, }) => {
+export 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.useMemo(() => {
@@ -22,10 +22,11 @@ export const FormColumn = ({ children, headName, input, meta, schema, props, })
     }, [headName, schema.description, props.descriptionType]);
     return (React.createElement(LayoutContainer, { className: b(), gap: 2, hidden: hidden },
         React.createElement(Flex, { direction: "column", gap: 0.5 },
-            React.createElement("div", { className: b('top') },
-                React.createElement(Text, { className: b('title', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
-                tooltip,
-                React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
+            React.createElement(Flex, { alignItems: "center", gap: 2 },
+                React.createElement("div", { className: b('title') },
+                    React.createElement(Text, { className: b('title-text', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
+                    tooltip),
+                React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
             bottomDescription),
         React.createElement(Flex, { className: b('bottom'), direction: "column", gap: 0.5 },
             children,

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
-import { ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer } from '../../components';
+import { EntityError, HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { block, getValidationState } from '../../utils';
 import './FormRow.css';
 const b = block('form-row');
-export const FormRow = ({ children, headName, input, meta, schema, props, }) => {
+export 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.useMemo(() => {
@@ -27,7 +27,7 @@ export const FormRow = ({ children, headName, input, meta, schema, props, }) =>
         React.createElement(Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
             React.createElement(Flex, { grow: 1, gap: 2 },
                 children,
-                React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
+                React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
             bottomDescription,
             React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))));
 };

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

@@ -4,9 +4,6 @@
 .sr-accordeon:last-child {
   margin-bottom: 0;
 }
-.sr-accordeon:hover .sr-accordeon__copy-button {
-  display: block;
-}
 .sr-accordeon .g-disclosure__trigger {
   padding-left: 6.5px;
 }
@@ -17,6 +14,8 @@
   display: none;
 }
 .sr-accordeon__toggler {
+  height: auto;
+  min-height: 28px;
   padding-left: 6px;
 }
 .sr-accordeon__title_required::after {
@@ -40,7 +39,4 @@
   position: absolute;
   left: calc(var(--g-spacing-base) * 3 + 1.5px);
   bottom: 0;
-}
-.sr-accordeon__copy-button {
-  display: none;
 }

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Button, Disclosure, Flex, HelpMark, Icon, Text, } from '@gravity-ui/uikit';
 import { SchemaRendererMode } from '../../../core';
-import { ArrayRemoveButton, CopyButton, EntityError, HTMLContent, LayoutContainer, } from '../../components';
+import { EntityError, HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { useExpanded } from '../../hooks';
 import { block, getValidationState } from '../../utils';
 import './Accordeon.css';
@@ -11,10 +11,10 @@ const b = block('accordeon');
 export const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = __rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
-    const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const { expanded, setExpanded } = useExpanded({ headName, name: input.name, open });
     const overviewFlag = mode === SchemaRendererMode.Overview;
-    const summary = React.useMemo(() => (React.createElement(Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
+    const summary = React.useMemo(() => (React.createElement(Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className), whiteSpace: "break-spaces", wordBreak: "break-word" }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
     const helpMark = React.useMemo(() => {
         if (schema.description) {
             return (React.createElement(HelpMark, null,
@@ -22,18 +22,6 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
         }
         return null;
     }, [schema.description, headName]);
-    const copyButton = React.useMemo(() => {
-        if (overviewFlag) {
-            return React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value });
-        }
-        return null;
-    }, [overviewFlag, copy, input.value]);
-    const removeButton = React.useMemo(() => {
-        if (overviewFlag) {
-            return null;
-        }
-        return React.createElement(ArrayRemoveButton, { name: input.name, headName: headName });
-    }, [overviewFlag, input.name, headName]);
     return (React.createElement(LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag, hidden: hidden },
         React.createElement(Disclosure, Object.assign({ summary: summary, expanded: expanded, onUpdate: setExpanded }, restLayoutProps),
             React.createElement(Disclosure.Summary, null, ({ expanded, onClick }, defaultSummary) => (React.createElement(Flex, { minHeight: "28px", alignItems: "center", gap: 2 },
@@ -42,8 +30,7 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
                         React.createElement(Icon, { data: expanded ? ChevronUp : ChevronDown }),
                         summary))),
                 helpMark,
-                copyButton,
-                removeButton))),
+                React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })))),
             React.createElement(Flex, { direction: "column", gap: 0.5, grow: 1 },
                 React.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children),
                 overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))))));

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

@@ -4,9 +4,6 @@
 .sr-card:last-child {
   margin-bottom: 0;
 }
-.sr-card:hover .sr-card__copy-button {
-  display: block;
-}
 .sr-card__inner {
   display: flex;
   flex-direction: column;
@@ -35,7 +32,4 @@
   content: "*";
   margin-left: calc(var(--g-spacing-base) * 1);
   color: var(--g-color-text-danger);
-}
-.sr-card__copy-button {
-  display: none;
 }

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Button, Flex, HelpMark, Icon, Text, Card as UIKitCard, } from '@gravity-ui/uikit';
 import { SchemaRendererMode } from '../../../core';
-import { ArrayRemoveButton, CopyButton, EntityError, HTMLContent, LayoutContainer, } from '../../components';
+import { EntityError, HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { useExpanded } from '../../hooks';
 import { block, getValidationState } from '../../utils';
 import './Card.css';
@@ -11,7 +11,7 @@ const b = block('card');
 export const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { descriptionType = 'tooltip', likeAccordeon = true } = props, restLayoutProps = __rest(props, ["descriptionType", "likeAccordeon"]);
-    const { copy, required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === SchemaRendererMode.Overview;
     const { expanded, toggleExpanded } = useExpanded({
         headName,
@@ -40,8 +40,7 @@ export const Card = ({ children, headName, input, meta, mode, schema, props, })
                             React.createElement(Text, { variant: "subheader-1", color: "complementary", className: b('title', { required: required && !overviewFlag }) }, schema.title),
                             tooltip),
                         React.createElement(Flex, { className: b('header-actions'), alignItems: "center", gap: 2 },
-                            overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
-                            overviewFlag ? null : (React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
+                            React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value }),
                             likeAccordeon ? (React.createElement(Flex, { width: "28px", justifyContent: "center" },
                                 React.createElement(Button, { onClick: toggleExpanded, size: "s", view: "flat-secondary" },
                                     React.createElement(Icon, { data: expanded ? ChevronUp : ChevronDown, size: 16 })))) : null)),

package/build/esm/lib/unstable/kit/layouts/Section/Section.css

@@ -4,9 +4,6 @@
 .sr-section:last-child {
   margin-bottom: 0;
 }
-.sr-section:hover .sr-section__copy-button {
-  display: block;
-}
 .sr-section__header {
   min-height: 28px;
 }
@@ -28,7 +25,4 @@
   position: absolute;
   left: calc(var(--g-spacing-base) * 3 + 1.5px);
   bottom: 0;
-}
-.sr-section__copy-button {
-  display: none;
 }

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

@@ -2,14 +2,14 @@ import { __rest } from "tslib";
 import React from 'react';
 import { Flex, HelpMark, Text, spacing } from '@gravity-ui/uikit';
 import { SchemaRendererMode } from '../../../core';
-import { ArrayRemoveButton, CopyButton, EntityError, HTMLContent, LayoutContainer, } from '../../components';
+import { EntityError, HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { block, getValidationState } from '../../utils';
 import './Section.css';
 const b = block('section');
 export const Section = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { descriptionType = 'tooltip', withIndent = false } = props, restLayoutProps = __rest(props, ["descriptionType", "withIndent"]);
-    const { copy, required, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { required, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === SchemaRendererMode.Overview;
     const tooltip = React.useMemo(() => {
         if (!schema.description || descriptionType === 'bottom') {
@@ -30,8 +30,7 @@ export const Section = ({ children, headName, input, meta, mode, schema, props,
                 React.createElement(Flex, { className: b('header'), gap: 2, alignItems: "center" },
                     React.createElement(Text, Object.assign({ variant: "subheader-1", color: "complementary" }, restLayoutProps, { className: b('title', { required: required && !overviewFlag }, restLayoutProps === null || restLayoutProps === void 0 ? void 0 : restLayoutProps.className) }), schema.title),
                     tooltip,
-                    overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
-                    overviewFlag ? null : (React.createElement(ArrayRemoveButton, { name: input.name, headName: headName }))),
+                    React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
                 bottomDescription),
             React.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children)),
         overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))));

package/build/esm/lib/unstable/kit/layouts/Transparent/Transparent.css

@@ -3,10 +3,4 @@
 }
 .sr-transparent:last-child {
   margin-bottom: 0;
-}
-.sr-transparent:hover .sr-transparent__copy-button {
-  display: block;
-}
-.sr-transparent__copy-button {
-  display: none;
 }

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

@@ -2,18 +2,17 @@ import React from 'react';
 import { Flex } from '@gravity-ui/uikit';
 import isBoolean from 'lodash/isBoolean';
 import { SchemaRendererMode } from '../../../core';
-import { ArrayRemoveButton, CopyButton, EntityError, LayoutContainer } from '../../components';
+import { EntityError, LayoutButtons, LayoutContainer } from '../../components';
 import { block, getValidationState } from '../../utils';
 import './Transparent.css';
 const b = block('transparent');
 export const Transparent = ({ children, headName, input, meta, mode, props, schema, }) => {
     var _a;
-    const { copy, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === SchemaRendererMode.Overview;
     return (React.createElement(LayoutContainer, { className: b(), gap: 0.5, hideEmpty: isBoolean(props.hideEmpty) ? props.hideEmpty : overviewFlag, hidden: hidden },
         React.createElement(Flex, { gap: 2 },
             children,
-            overviewFlag ? null : React.createElement(ArrayRemoveButton, { name: input.name, headName: headName }),
-            overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null),
+            React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
         overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))));
 };

package/build/esm/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
-import { CopyButton, HTMLContent, LayoutContainer } from '../../components';
+import { HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { block } from '../../utils';
 import './OverviewColumn.css';
 const b = block('overview-column');
-export const OverviewColumn = ({ children, headName, input, schema }) => {
+export const OverviewColumn = ({ children, headName, input, mode, schema, }) => {
     var _a;
-    const { copy, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const tooltip = React.useMemo(() => {
         if (!schema.description) {
             return null;
@@ -22,5 +22,5 @@ export const OverviewColumn = ({ children, headName, input, schema }) => {
         React.createElement(Flex, { className: b('bottom'), direction: "column", gap: 0.5, grow: 1 },
             React.createElement(Flex, { grow: 1, gap: 2 },
                 children,
-                React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })))));
+                React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })))));
 };

package/build/esm/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
-import { CopyButton, HTMLContent, LayoutContainer } from '../../components';
+import { HTMLContent, LayoutButtons, LayoutContainer } from '../../components';
 import { block } from '../../utils';
 import './OverviewRow.css';
 const b = block('overview-row');
-export const OverviewRow = ({ children, headName, input, schema }) => {
+export const OverviewRow = ({ children, headName, input, mode, schema }) => {
     var _a;
-    const { copy, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const tooltip = React.useMemo(() => {
         if (!schema.description) {
             return null;
@@ -22,5 +22,5 @@ export const OverviewRow = ({ children, headName, input, schema }) => {
         React.createElement(Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
             React.createElement(Flex, { grow: 1, gap: 2 },
                 children,
-                React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })))));
+                React.createElement(LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })))));
 };

package/package.json

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