fix: fix remove button for array item object

src/lib/kit/components/Layouts/Accordeon/Accordeon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
+import {ArrayLayoutProps, ObjectLayoutProps, isArrayItem} from '../../../../core';
 import {ErrorWrapper} from '../../../components';
 import {useErrorChecker} from '../../../hooks';
 import {RemoveButton} from '../../RemoveButton';
@@ -21,7 +21,7 @@ export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
     }, [input.onDrop, setOpen]);
 
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
 

src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
+import {ArrayLayoutProps, ObjectLayoutProps, isArrayItem} from '../../../../core';
 import {useErrorChecker} from '../../../hooks';
 import {block} from '../../../utils';
 import {AccordeonCard} from '../../AccordeonCard';
@@ -26,7 +26,7 @@ export const AccordeonCardForm = <T extends ArrayLayoutProps | ObjectLayoutProps
     }, [input.onDrop, setOpen]);
 
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
 

src/lib/kit/components/Layouts/CardAccordeon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {FieldValue, LayoutProps, Spec} from '../../../core';
+import {FieldValue, LayoutProps, Spec, isArrayItem} from '../../../core';
 import {Card, ErrorWrapper} from '../../components';
 import {useErrorChecker} from '../../hooks';
 import {RemoveButton} from '../RemoveButton';
@@ -22,7 +22,7 @@ export const CardAccordeon = <T extends FieldValue, S extends Spec>({
     }, [input.onDrop, setOpen]);
 
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
 

src/lib/kit/components/Layouts/CardSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {FieldValue, LayoutProps, Spec} from '../../../core';
+import {FieldValue, LayoutProps, Spec, isArrayItem} from '../../../core';
 import {Card, ErrorWrapper} from '../../components';
 import {RemoveButton} from '../RemoveButton';
 
@@ -12,7 +12,7 @@ export const CardSection = <T extends FieldValue, S extends Spec>({
     children,
 }: LayoutProps<T, undefined, undefined, S>) => {
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
 

src/lib/kit/components/Layouts/Section/Section.scss

@@ -12,27 +12,29 @@ $block: '.#{$ns}section';
     }
 
     &__header {
+        display: flex;
+        align-items: center;
         margin-bottom: $normalOffset;
 
-        &_with-popover {
-            display: flex;
+        &_size_s {
+            height: 18px;
+        }
+
+        &_size_m {
+            height: 20px;
         }
     }
 
     &__title {
         max-width: 533px;
-        font-weight: 500;
-        margin: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    }
 
-        &_size_s {
-            font-size: 13px;
-        }
+    &__title-popover {
+        display: flex;
+        align-items: center;
 
-        &_size_m {
-            font-size: 15px;
+        .g-popover__handler {
+            display: flex;
         }
     }
 
@@ -51,4 +53,8 @@ $block: '.#{$ns}section';
     &__description {
         margin-top: 4px;
     }
+
+    &__remove-button {
+        margin-left: 5px;
+    }
 }

src/lib/kit/components/Layouts/Section/Section.tsx

@@ -4,6 +4,7 @@ import {HelpPopover} from '@gravity-ui/components';
 import {Popover, Text} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
+import {RemoveButton} from '../../RemoveButton';
 import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper} from '../../../';
 import {
     FieldRenderProps,
@@ -12,6 +13,7 @@ import {
     LayoutProps,
     Spec,
     ViewLayoutProps,
+    isArrayItem,
     isArraySpec,
     isObjectSpec,
 } from '../../../../core';
@@ -38,11 +40,28 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
     children,
     ...restProps
 }: (LayoutProps<D, undefined, undefined, S> | ViewLayoutProps<T, S>) & SectionProps) => {
+    const input = (restProps as FieldRenderProps<D>).input as
+        | FieldRenderProps<D>['input']
+        | undefined;
     const meta = (restProps as FieldRenderProps<D>).meta as FieldRenderProps<D>['meta'] | undefined;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
     const titleRef = React.useRef<HTMLHeadingElement>(null);
     let content = children;
 
+    const removeButton = React.useMemo(() => {
+        if (input?.value && input?.onDrop && isArrayItem(name)) {
+            return (
+                <RemoveButton
+                    name={name}
+                    onDrop={input.onDrop}
+                    switcherClassName={b('remove-button')}
+                />
+            );
+        }
+
+        return null;
+    }, [input?.value, input?.onDrop, name]);
+
     if (meta) {
         content = (
             <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles={arrOrObjFlag}>
@@ -88,18 +107,26 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
                 <div
                     className={b('header', {
                         'with-popover': !descriptionAsSubtitle,
+                        size: titleSize,
                     })}
                 >
                     <Popover
+                        className={b('title-popover')}
                         content={layoutTitle}
                         placement={COMMON_POPOVER_PLACEMENT}
                         disabled={layoutTitlePopoverDisabled}
                     >
-                        <h2 className={b('title', {size: titleSize})} ref={titleRef}>
+                        <Text
+                            className={b('title')}
+                            variant={titleSize === 'm' ? 'body-2' : 'body-1'}
+                            ref={titleRef}
+                            ellipsis
+                        >
                             {layoutTitle}
-                        </h2>
+                        </Text>
                     </Popover>
                     {description}
+                    {removeButton}
                 </div>
             ) : null}
             <div className={b('content')}>{content}</div>

src/lib/kit/components/RemoveButton/RemoveButton.tsx

@@ -8,21 +8,22 @@ import i18n from '../../i18n';
 export interface RemoveButtonProps {
     name: string;
     onDrop: () => void;
+    switcherClassName?: string;
 }
 
-export const RemoveButton: React.FC<RemoveButtonProps> = ({name, onDrop}) => {
+export const RemoveButton: React.FC<RemoveButtonProps> = ({name, onDrop, switcherClassName}) => {
     const items: DropdownMenuItemMixed<any>[] = React.useMemo(
         () => [{text: i18n('label_delete'), action: onDrop, theme: 'danger'}],
         [onDrop],
     );
 
     const switcher = React.useMemo(
         () => (
-            <Button view="flat" qa={`${name}-drop-item`}>
+            <Button className={switcherClassName} view="flat" qa={`${name}-drop-item`}>
                 <Icon data={Ellipsis} size={16} />
             </Button>
         ),
-        [],
+        [switcherClassName],
     );
 
     return <DropdownMenu switcher={switcher} items={items} />;

src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss

@@ -23,18 +23,14 @@ $animationDuration: 0.3s;
             margin-left: -13px;
             max-width: 533px;
         }
+
+        .g-popover__handler {
+            display: flex;
+        }
     }
 
     &__tooltip {
         margin: 0px 5px;
-
-        .g-help-popover {
-            display: flex;
-
-            & > span {
-                display: flex;
-            }
-        }
     }
 
     &__chevron {