@gravity-ui/dynamic-forms 5.32.0 → 5.33.0

package/build/cjs/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/cjs/lib/unstable/kit/layouts/Accordeon/Accordeon.js

@@ -13,10 +13,10 @@ const b = (0, utils_1.block)('accordeon');
 const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = tslib_1.__rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
-    const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const { expanded, setExpanded } = (0, hooks_1.useExpanded)({ headName, name: input.name, open });
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
-    const summary = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
+    const summary = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className), whiteSpace: "break-spaces", wordBreak: "break-word" }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
     const helpMark = react_1.default.useMemo(() => {
         if (schema.description) {
             return (react_1.default.createElement(uikit_1.HelpMark, null,
@@ -24,18 +24,6 @@ const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) =>
         }
         return null;
     }, [schema.description, headName]);
-    const copyButton = react_1.default.useMemo(() => {
-        if (overviewFlag) {
-            return react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value });
-        }
-        return null;
-    }, [overviewFlag, copy, input.value]);
-    const removeButton = react_1.default.useMemo(() => {
-        if (overviewFlag) {
-            return null;
-        }
-        return react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName });
-    }, [overviewFlag, input.name, headName]);
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag, hidden: hidden },
         react_1.default.createElement(uikit_1.Disclosure, Object.assign({ summary: summary, expanded: expanded, onUpdate: setExpanded }, restLayoutProps),
             react_1.default.createElement(uikit_1.Disclosure.Summary, null, ({ expanded, onClick }, defaultSummary) => (react_1.default.createElement(uikit_1.Flex, { minHeight: "28px", alignItems: "center", gap: 2 },
@@ -44,8 +32,7 @@ const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) =>
                         react_1.default.createElement(uikit_1.Icon, { data: expanded ? icons_1.ChevronUp : icons_1.ChevronDown }),
                         summary))),
                 helpMark,
-                copyButton,
-                removeButton))),
+                react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })))),
             react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 0.5, grow: 1 },
                 react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children),
                 overviewFlag ? null : (react_1.default.createElement(components_1.EntityError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) }))))));

package/build/cjs/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/cjs/lib/unstable/kit/layouts/Card/Card.js

@@ -13,7 +13,7 @@ const b = (0, utils_1.block)('card');
 const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { descriptionType = 'tooltip', likeAccordeon = true } = props, restLayoutProps = tslib_1.__rest(props, ["descriptionType", "likeAccordeon"]);
-    const { copy, required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
+    const { required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
     const { expanded, toggleExpanded } = (0, hooks_1.useExpanded)({
         headName,
@@ -42,8 +42,7 @@ const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
                             react_1.default.createElement(uikit_1.Text, { variant: "subheader-1", color: "complementary", className: b('title', { required: required && !overviewFlag }) }, schema.title),
                             tooltip),
                         react_1.default.createElement(uikit_1.Flex, { className: b('header-actions'), alignItems: "center", gap: 2 },
-                            overviewFlag ? (react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
-                            overviewFlag ? null : (react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName })),
+                            react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value }),
                             likeAccordeon ? (react_1.default.createElement(uikit_1.Flex, { width: "28px", justifyContent: "center" },
                                 react_1.default.createElement(uikit_1.Button, { onClick: toggleExpanded, size: "s", view: "flat-secondary" },
                                     react_1.default.createElement(uikit_1.Icon, { data: expanded ? icons_1.ChevronUp : icons_1.ChevronDown, size: 16 })))) : null)),

package/build/cjs/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/cjs/lib/unstable/kit/layouts/Section/Section.js

@@ -11,7 +11,7 @@ const b = (0, utils_1.block)('section');
 const Section = ({ children, headName, input, meta, mode, schema, props, }) => {
     var _a;
     const { descriptionType = 'tooltip', withIndent = false } = props, restLayoutProps = tslib_1.__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 === core_1.SchemaRendererMode.Overview;
     const tooltip = react_1.default.useMemo(() => {
         if (!schema.description || descriptionType === 'bottom') {
@@ -32,8 +32,7 @@ const Section = ({ children, headName, input, meta, mode, schema, props, }) => {
                 react_1.default.createElement(uikit_1.Flex, { className: b('header'), gap: 2, alignItems: "center" },
                     react_1.default.createElement(uikit_1.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_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
-                    overviewFlag ? null : (react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName }))),
+                    react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
                 bottomDescription),
             react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children)),
         overviewFlag ? null : (react_1.default.createElement(components_1.EntityError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) }))));

package/build/cjs/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/cjs/lib/unstable/kit/layouts/Transparent/Transparent.js

@@ -11,13 +11,12 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('transparent');
 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 === core_1.SchemaRendererMode.Overview;
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b(), gap: 0.5, hideEmpty: (0, isBoolean_1.default)(props.hideEmpty) ? props.hideEmpty : overviewFlag, hidden: hidden },
         react_1.default.createElement(uikit_1.Flex, { gap: 2 },
             children,
-            overviewFlag ? null : react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName }),
-            overviewFlag ? (react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null),
+            react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })),
         overviewFlag ? null : (react_1.default.createElement(components_1.EntityError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) }))));
 };
 exports.Transparent = Transparent;

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

@@ -7,9 +7,9 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('overview-column');
-const OverviewColumn = ({ children, headName, input, schema }) => {
+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_1.default.useMemo(() => {
         if (!schema.description) {
             return null;
@@ -25,6 +25,6 @@ const OverviewColumn = ({ children, headName, input, schema }) => {
         react_1.default.createElement(uikit_1.Flex, { className: b('bottom'), direction: "column", gap: 0.5, grow: 1 },
             react_1.default.createElement(uikit_1.Flex, { grow: 1, gap: 2 },
                 children,
-                react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })))));
+                react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })))));
 };
 exports.OverviewColumn = OverviewColumn;

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

@@ -7,9 +7,9 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('overview-row');
-const OverviewRow = ({ children, headName, input, schema }) => {
+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_1.default.useMemo(() => {
         if (!schema.description) {
             return null;
@@ -25,6 +25,6 @@ const OverviewRow = ({ children, headName, input, schema }) => {
         react_1.default.createElement(uikit_1.Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
             react_1.default.createElement(uikit_1.Flex, { grow: 1, gap: 2 },
                 children,
-                react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })))));
+                react_1.default.createElement(components_1.LayoutButtons, { mode: mode, name: input.name, headName: headName, schema: schema, value: input.value })))));
 };
 exports.OverviewRow = OverviewRow;

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/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;
 }