@gravity-ui/dynamic-forms 4.14.2 → 4.14.3

package/build/cjs/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
 const components_1 = require("../../../components");
 const hooks_1 = require("../../../hooks");
 const RemoveButton_1 = require("../../RemoveButton");
@@ -15,7 +16,7 @@ const Accordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: onDrop });

package/build/cjs/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordeonCardForm = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const AccordeonCard_1 = require("../../AccordeonCard");
@@ -17,7 +18,7 @@ const AccordeonCardForm = ({ name, spec, input, children, meta, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: onDrop });

package/build/cjs/lib/kit/components/Layouts/CardAccordeon.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../core");
 const components_1 = require("../../components");
 const hooks_1 = require("../../hooks");
 const RemoveButton_1 = require("../RemoveButton");
@@ -15,7 +16,7 @@ const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop, name: name });

package/build/cjs/lib/kit/components/Layouts/CardSection.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardSection = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../core");
 const components_1 = require("../../components");
 const RemoveButton_1 = require("../RemoveButton");
 const CardSection = ({ name, spec, input, meta, children, }) => {
     const removeButton = react_1.default.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!(0, core_1.isArrayItem)(name) && (spec.required || !input.value)) {
             return null;
         }
         return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop, name: name });

package/build/cjs/lib/kit/components/Layouts/Section/Section.css

@@ -5,24 +5,25 @@
   margin-bottom: 0;
 }
 .df-section__header {
+  display: flex;
+  align-items: center;
   margin-bottom: 20px;
 }
-.df-section__header_with-popover {
-  display: flex;
+.df-section__header_size_s {
+  height: 18px;
+}
+.df-section__header_size_m {
+  height: 20px;
 }
 .df-section__title {
   max-width: 533px;
-  font-weight: 500;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-.df-section__title_size_s {
-  font-size: 13px;
+.df-section__title-popover {
+  display: flex;
+  align-items: center;
 }
-.df-section__title_size_m {
-  font-size: 15px;
+.df-section__title-popover .g-popover__handler {
+  display: flex;
 }
 .df-section__note {
   margin-left: 5px;
@@ -35,4 +36,7 @@
 }
 .df-section__description {
   margin-top: 4px;
+}
+.df-section__remove-button {
+  margin-left: 5px;
 }

package/build/cjs/lib/kit/components/Layouts/Section/Section.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const __1 = require("../../");
+const RemoveButton_1 = require("../../RemoveButton");
 const __2 = require("../../../");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
@@ -13,10 +14,17 @@ const b = (0, utils_1.block)('section');
 const SectionBase = (_a) => {
     var _b;
     var { name, spec, titleSize, withIndent, ignoreDescription, descriptionAsSubtitle, children } = _a, restProps = tslib_1.__rest(_a, ["name", "spec", "titleSize", "withIndent", "ignoreDescription", "descriptionAsSubtitle", "children"]);
+    const input = restProps.input;
     const meta = restProps.meta;
     const arrOrObjFlag = (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec);
     const titleRef = react_1.default.useRef(null);
     let content = children;
+    const removeButton = react_1.default.useMemo(() => {
+        if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && (0, core_1.isArrayItem)(name)) {
+            return (react_1.default.createElement(RemoveButton_1.RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
+        }
+        return null;
+    }, [input === null || input === void 0 ? void 0 : input.value, input === null || input === void 0 ? void 0 : input.onDrop, name]);
     if (meta) {
         content = (react_1.default.createElement(__2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
     }
@@ -40,10 +48,12 @@ const SectionBase = (_a) => {
     return (react_1.default.createElement("section", { className: b() },
         layoutTitle ? (react_1.default.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
+                size: titleSize,
             }) },
-            react_1.default.createElement(uikit_1.Popover, { content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
-                react_1.default.createElement("h2", { className: b('title', { size: titleSize }), ref: titleRef }, layoutTitle)),
-            description)) : null,
+            react_1.default.createElement(uikit_1.Popover, { className: b('title-popover'), content: layoutTitle, placement: __2.COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
+            description,
+            removeButton)) : null,
         react_1.default.createElement("div", { className: b('content') }, content)));
 };
 const Section = (props) => react_1.default.createElement(SectionBase, Object.assign({ titleSize: "m" }, props));

package/build/cjs/lib/kit/components/RemoveButton/RemoveButton.js

@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
-const RemoveButton = ({ name, onDrop }) => {
+const RemoveButton = ({ name, onDrop, switcherClassName }) => {
     const items = react_1.default.useMemo(() => [{ text: (0, i18n_1.default)('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
-    const switcher = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Button, { view: "flat", qa: `${name}-drop-item` },
-        react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: 16 }))), []);
+    const switcher = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Button, { className: switcherClassName, view: "flat", qa: `${name}-drop-item` },
+        react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: 16 }))), [switcherClassName]);
     return react_1.default.createElement(uikit_1.DropdownMenu, { switcher: switcher, items: items });
 };
 exports.RemoveButton = RemoveButton;

package/build/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -17,14 +17,11 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__tooltip {
-  margin: 0px 5px;
-}
-.df-simple-vertical-accordeon__tooltip .g-help-popover {
+.df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
-.df-simple-vertical-accordeon__tooltip .g-help-popover > span {
-  display: flex;
+.df-simple-vertical-accordeon__tooltip {
+  margin: 0px 5px;
 }
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isArrayItem } from '../../../../core';
 import { ErrorWrapper } from '../../../components';
 import { useErrorChecker } from '../../../hooks';
 import { RemoveButton } from '../../RemoveButton';
@@ -11,7 +12,7 @@ export const Accordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { name: name, onDrop: onDrop });

package/build/esm/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isArrayItem } from '../../../../core';
 import { useErrorChecker } from '../../../hooks';
 import { block } from '../../../utils';
 import { AccordeonCard } from '../../AccordeonCard';
@@ -14,7 +15,7 @@ export const AccordeonCardForm = ({ name, spec, input, children, meta, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { name: name, onDrop: onDrop });

package/build/esm/lib/kit/components/Layouts/CardAccordeon.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isArrayItem } from '../../../core';
 import { Card, ErrorWrapper } from '../../components';
 import { useErrorChecker } from '../../hooks';
 import { RemoveButton } from '../RemoveButton';
@@ -11,7 +12,7 @@ export const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         input.onDrop();
     }, [input.onDrop, setOpen]);
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { onDrop: onDrop, name: name });

package/build/esm/lib/kit/components/Layouts/CardSection.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { isArrayItem } from '../../../core';
 import { Card, ErrorWrapper } from '../../components';
 import { RemoveButton } from '../RemoveButton';
 export const CardSection = ({ name, spec, input, meta, children, }) => {
     const removeButton = React.useMemo(() => {
-        if (spec.required || !input.value) {
+        if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
         }
         return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });

package/build/esm/lib/kit/components/Layouts/Section/Section.css

@@ -5,24 +5,25 @@
   margin-bottom: 0;
 }
 .df-section__header {
+  display: flex;
+  align-items: center;
   margin-bottom: 20px;
 }
-.df-section__header_with-popover {
-  display: flex;
+.df-section__header_size_s {
+  height: 18px;
+}
+.df-section__header_size_m {
+  height: 20px;
 }
 .df-section__title {
   max-width: 533px;
-  font-weight: 500;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-.df-section__title_size_s {
-  font-size: 13px;
+.df-section__title-popover {
+  display: flex;
+  align-items: center;
 }
-.df-section__title_size_m {
-  font-size: 15px;
+.df-section__title-popover .g-popover__handler {
+  display: flex;
 }
 .df-section__note {
   margin-left: 5px;
@@ -35,4 +36,7 @@
 }
 .df-section__description {
   margin-top: 4px;
+}
+.df-section__remove-button {
+  margin-left: 5px;
 }

package/build/esm/lib/kit/components/Layouts/Section/Section.js

@@ -3,18 +3,26 @@ import React from 'react';
 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 { isArraySpec, isObjectSpec, } from '../../../../core';
+import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
 import { block } from '../../../utils';
 import './Section.css';
 const b = block('section');
 const SectionBase = (_a) => {
     var _b;
     var { name, spec, titleSize, withIndent, ignoreDescription, descriptionAsSubtitle, children } = _a, restProps = __rest(_a, ["name", "spec", "titleSize", "withIndent", "ignoreDescription", "descriptionAsSubtitle", "children"]);
+    const input = restProps.input;
     const meta = restProps.meta;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
     const titleRef = React.useRef(null);
     let content = children;
+    const removeButton = React.useMemo(() => {
+        if ((input === null || input === void 0 ? void 0 : input.value) && (input === null || input === void 0 ? void 0 : input.onDrop) && isArrayItem(name)) {
+            return (React.createElement(RemoveButton, { name: name, onDrop: input.onDrop, switcherClassName: b('remove-button') }));
+        }
+        return null;
+    }, [input === null || input === void 0 ? void 0 : input.value, input === null || input === void 0 ? void 0 : input.onDrop, name]);
     if (meta) {
         content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
     }
@@ -38,10 +46,12 @@ const SectionBase = (_a) => {
     return (React.createElement("section", { className: b() },
         layoutTitle ? (React.createElement("div", { className: b('header', {
                 'with-popover': !descriptionAsSubtitle,
+                size: titleSize,
             }) },
-            React.createElement(Popover, { content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
-                React.createElement("h2", { className: b('title', { size: titleSize }), ref: titleRef }, layoutTitle)),
-            description)) : null,
+            React.createElement(Popover, { className: b('title-popover'), content: layoutTitle, placement: COMMON_POPOVER_PLACEMENT, disabled: layoutTitlePopoverDisabled },
+                React.createElement(Text, { className: b('title'), variant: titleSize === 'm' ? 'body-2' : 'body-1', ref: titleRef, ellipsis: true }, layoutTitle)),
+            description,
+            removeButton)) : null,
         React.createElement("div", { className: b('content') }, content)));
 };
 export const Section = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "m" }, props));

package/build/esm/lib/kit/components/RemoveButton/RemoveButton.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 export interface RemoveButtonProps {
     name: string;
     onDrop: () => void;
+    switcherClassName?: string;
 }
 export declare const RemoveButton: React.FC<RemoveButtonProps>;

package/build/esm/lib/kit/components/RemoveButton/RemoveButton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { Ellipsis } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
 import i18n from '../../i18n';
-export const RemoveButton = ({ name, onDrop }) => {
+export const RemoveButton = ({ name, onDrop, switcherClassName }) => {
     const items = React.useMemo(() => [{ text: i18n('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
-    const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat", qa: `${name}-drop-item` },
-        React.createElement(Icon, { data: Ellipsis, size: 16 }))), []);
+    const switcher = React.useMemo(() => (React.createElement(Button, { className: switcherClassName, view: "flat", qa: `${name}-drop-item` },
+        React.createElement(Icon, { data: Ellipsis, size: 16 }))), [switcherClassName]);
     return React.createElement(DropdownMenu, { switcher: switcher, items: items });
 };

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -17,14 +17,11 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__tooltip {
-  margin: 0px 5px;
-}
-.df-simple-vertical-accordeon__tooltip .g-help-popover {
+.df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
-.df-simple-vertical-accordeon__tooltip .g-help-popover > span {
-  display: flex;
+.df-simple-vertical-accordeon__tooltip {
+  margin: 0px 5px;
 }
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);

package/package.json

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