@gravity-ui/dynamic-forms 2.1.1 → 2.3.0

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

@@ -19,6 +19,6 @@
 .df-error-wrapper__error-text {
   color: var(--yc-color-text-danger);
   margin-top: 2px;
-  font-size: var(--yc-text-body-font-size);
-  line-height: var(--yc-text-body-line-height);
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
 }

package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.css

@@ -0,0 +1,14 @@
+.df-array-base_add-button-right {
+  display: flex;
+  align-items: flex-end;
+}
+.df-array-base__items-wrapper_add-button-down {
+  margin-bottom: 15px;
+}
+.df-array-base__item-prefix {
+  margin-top: -7px;
+  margin-bottom: 8px;
+}
+.df-array-base__add-button_right {
+  margin-left: 4px;
+}

package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.js

@@ -7,25 +7,14 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('array-base');
 const ArrayBase = ({ spec, name, arrayInput, input }) => {
     const keys = react_1.default.useMemo(() => Object.keys(arrayInput.value || {})
         .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG && k !== core_1.OBJECT_ARRAY_CNT)
         .map((k) => k.split('<').join('').split('>').join(''))
         .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
     const itemSpecCorrect = react_1.default.useMemo(() => (0, core_1.isCorrectSpec)(spec.items), [spec.items]);
-    const onItemAdd = react_1.default.useCallback(() => {
-        var _a;
-        let item;
-        if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
-            if ((0, core_1.isArraySpec)(spec.items)) {
-                item = { [core_1.OBJECT_ARRAY_FLAG]: true, [core_1.OBJECT_ARRAY_CNT]: 0 };
-            }
-            else if ((0, core_1.isObjectSpec)(spec.items)) {
-                item = {};
-            }
-        }
-        arrayInput.onItemAdd(item);
-    }, [arrayInput.onItemAdd, spec.items]);
     const getItemSpec = react_1.default.useCallback((idx) => {
         if (!itemSpecCorrect) {
             return null;
@@ -37,23 +26,68 @@ const ArrayBase = ({ spec, name, arrayInput, input }) => {
         return itemSpec;
     }, [spec.items, itemSpecCorrect]);
     const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const AddButton = react_1.default.useCallback(() => {
+        let onClick = () => {
+            var _a;
+            let item;
+            if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
+                if ((0, core_1.isArraySpec)(spec.items)) {
+                    item = { [core_1.OBJECT_ARRAY_FLAG]: true, [core_1.OBJECT_ARRAY_CNT]: 0 };
+                }
+                else if ((0, core_1.isObjectSpec)(spec.items)) {
+                    item = {};
+                }
+            }
+            arrayInput.onItemAdd(item);
+        };
+        let qa = `${name}-add-item`;
+        let title = spec.viewSpec.itemLabel;
+        if (!arrayInput.value && spec.defaultValue) {
+            onClick = () => {
+                input.onChange((0, core_1.transformArrIn)(spec.defaultValue));
+            };
+            qa = `${name}-init-arr`;
+            title = spec.viewSpec.layoutTitle;
+        }
+        return (react_1.default.createElement(uikit_1.Button, { onClick: onClick, disabled: spec.viewSpec.disabled, qa: qa, className: b('add-button', { right: spec.viewSpec.addButtonPosition === 'right' }) },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            title || null));
+    }, [
+        arrayInput,
+        input,
+        name,
+        spec.defaultValue,
+        spec.items,
+        spec.viewSpec.disabled,
+        spec.viewSpec.itemLabel,
+        spec.viewSpec.layoutTitle,
+    ]);
     const items = react_1.default.useMemo(() => keys.map((key, idx) => {
         var _a;
         const itemSpec = getItemSpec(idx);
         if (!itemSpec) {
             return null;
         }
-        return (react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
-    }), [keys.join(''), name, getItemSpec, parentOnChange, input.parentOnUnmount, input.value]);
+        const showItemPrefix = idx !== 0 && spec.viewSpec.itemPrefix;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: `${name}.<${key}>` },
+            showItemPrefix ? (react_1.default.createElement(uikit_1.Label, { size: "m", className: b('item-prefix') }, spec.viewSpec.itemPrefix)) : null,
+            react_1.default.createElement(core_1.Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>` })));
+    }), [
+        keys.join(''),
+        name,
+        getItemSpec,
+        parentOnChange,
+        input.parentOnUnmount,
+        input.value,
+        spec.viewSpec.itemPrefix,
+    ]);
     if (!itemSpecCorrect) {
         return null;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        items,
-        !arrayInput.value && spec.defaultValue ? (react_1.default.createElement(uikit_1.Button, { onClick: () => input.onChange((0, core_1.transformArrIn)(spec.defaultValue)), disabled: spec.viewSpec.disabled, qa: `${name}-init-arr` },
-            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
-            spec.viewSpec.layoutTitle || null)) : (react_1.default.createElement(uikit_1.Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled, qa: `${name}-add-item` },
-            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
-            spec.viewSpec.itemLabel || null))));
+    return (react_1.default.createElement("div", { className: b({ 'add-button-right': spec.viewSpec.addButtonPosition === 'right' }) },
+        react_1.default.createElement("div", { className: b('items-wrapper', {
+                'add-button-down': spec.viewSpec.addButtonPosition !== 'right' && keys.length > 0,
+            }) }, items),
+        react_1.default.createElement(AddButton, null)));
 };
 exports.ArrayBase = ArrayBase;

package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js

@@ -41,8 +41,8 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             id: 'remove',
             name: '',
             sticky: 'right',
-            template: ({ key }) => (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))),
+            template: ({ key }) => (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))),
         };
         const columns = table.map(({ property, label }) => ({
             id: property,

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

@@ -22,8 +22,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
                 react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
-                arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
-                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null),
+                arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };
 const Row = (props) => (react_1.default.createElement(RowBase, Object.assign({}, props)));

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

@@ -18,8 +18,8 @@ const Row2 = ({ name, spec, input, meta, children, }) => {
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
                 react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
-                (0, core_1.isArrayItem)(name) ? (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
-                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null),
+                (0, core_1.isArrayItem)(name) ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null),
             spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };
 exports.Row2 = Row2;

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

@@ -14,8 +14,8 @@ const Transparent = ({ name, spec, input, meta, children, }) => {
     const arrOrObjFlag = react_1.default.useMemo(() => (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec), [spec]);
     const removeButton = react_1.default.useMemo(() => {
         if (arrayItem) {
-            return (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 })));
+            return (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 })));
         }
         return null;
     }, [input.onDrop, arrayItem, name]);

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

@@ -22,7 +22,7 @@
 }
 .df-simple-vertical-accordeon__title_size_s {
   margin-bottom: 0;
-  font-size: var(--yc-text-body-font-size);
+  font-size: var(--yc-text-body-1-font-size);
 }
 .df-simple-vertical-accordeon__title_size_m {
   margin-bottom: 1px;

package/build/cjs/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.css

@@ -0,0 +1,4 @@
+.df-array-base-view__item-prefix {
+  margin-top: -10px;
+  margin-bottom: 15px;
+}

package/build/cjs/lib/kit/components/Views/{ArrayBaseView.js → ArrayBaseView/ArrayBaseView.js}

@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrayBaseView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const core_1 = require("../../../core");
+const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('array-base-view');
 const ArrayBaseView = ({ spec, name, value = [] }) => {
     const itemSpecCorrect = react_1.default.useMemo(() => (0, core_1.isCorrectSpec)(spec.items), [spec.items]);
     const getItemSpec = react_1.default.useCallback((idx) => {
@@ -22,8 +25,11 @@ const ArrayBaseView = ({ spec, name, value = [] }) => {
         if (!itemSpec) {
             return null;
         }
-        return (react_1.default.createElement(core_1.ViewController, { spec: itemSpec, name: `${name}[${idx}]`, key: `${name}[${idx}]` }));
-    }), [value.length, name, getItemSpec]);
+        const showItemPrefix = idx !== 0 && spec.viewSpec.itemPrefix;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: `${name}[${idx}]` },
+            showItemPrefix ? (react_1.default.createElement(uikit_1.Label, { size: "m", className: b('item-prefix') }, spec.viewSpec.itemPrefix)) : null,
+            react_1.default.createElement(core_1.ViewController, { spec: itemSpec, name: `${name}[${idx}]` })));
+    }), [value.length, name, getItemSpec, spec.viewSpec.itemPrefix]);
     if (!itemSpecCorrect) {
         return null;
     }

package/build/cjs/lib/kit/components/Views/ArrayBaseView/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ArrayBaseView"), exports);

package/build/cjs/lib/kit/utils/common.js

@@ -36,7 +36,7 @@ const isNotEmptyValue = (value, spec) => {
 };
 exports.isNotEmptyValue = isNotEmptyValue;
 const prepareSpec = (spec, parseJsonDefaultValue) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (lodash_1.default.isObjectLike(spec)) {
         const result = lodash_1.default.cloneDeep(spec);
         if (lodash_1.default.isString(result.type)) {
@@ -48,7 +48,7 @@ const prepareSpec = (spec, parseJsonDefaultValue) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_d) {
+                catch (_e) {
                     _defaultValue = undefined;
                 }
             }
@@ -66,7 +66,10 @@ const prepareSpec = (spec, parseJsonDefaultValue) => {
         if (lodash_1.default.isString((_b = result.viewSpec) === null || _b === void 0 ? void 0 : _b.layout)) {
             result.viewSpec.layout = result.viewSpec.layout.toLowerCase();
         }
-        if (lodash_1.default.isString((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.themeLabel)) {
+        if (lodash_1.default.isString((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.addButtonPosition)) {
+            result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
+        }
+        if (lodash_1.default.isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
             result.viewSpec.themeLabel = result.viewSpec.themeLabel.toLowerCase();
         }
         if (lodash_1.default.isString(result.validator)) {

package/build/cjs/lib/kit/validators/validators.js

@@ -72,7 +72,8 @@ const getNumberValidator = (params = {}) => {
         }
         if (!ignoreMinimumCheck &&
             lodash_1.default.isNumber(spec.minimum) &&
-            ((stringValue.length && spec.minimum > Number(stringValue)) || !stringValue.length)) {
+            stringValue.length &&
+            spec.minimum > Number(stringValue)) {
             return validators_1.ErrorMessages.minNumber(spec.minimum);
         }
         if (lodash_1.default.isString(spec.format) && stringValue.length) {

package/build/esm/lib/core/types/specs.d.ts

@@ -19,12 +19,14 @@ export interface ArraySpec<LinkType = any> {
         layoutDescription?: string;
         layoutOpen?: boolean;
         itemLabel?: string;
+        itemPrefix?: string;
         table?: {
             label: string;
             property: string;
         }[];
         link?: LinkType;
         placeholder?: string;
+        addButtonPosition?: 'down' | 'right';
     };
 }
 export interface BooleanSpec<LinkType = any> {

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

@@ -19,6 +19,6 @@
 .df-error-wrapper__error-text {
   color: var(--yc-color-text-danger);
   margin-top: 2px;
-  font-size: var(--yc-text-body-font-size);
-  line-height: var(--yc-text-body-line-height);
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
 }

package/build/esm/lib/kit/components/Inputs/ArrayBase/ArrayBase.css

@@ -0,0 +1,14 @@
+.df-array-base_add-button-right {
+  display: flex;
+  align-items: flex-end;
+}
+.df-array-base__items-wrapper_add-button-down {
+  margin-bottom: 15px;
+}
+.df-array-base__item-prefix {
+  margin-top: -7px;
+  margin-bottom: 8px;
+}
+.df-array-base__add-button_right {
+  margin-left: 4px;
+}

package/build/esm/lib/kit/components/Inputs/ArrayBase/ArrayBase.d.ts

@@ -1,2 +1,3 @@
 import { ArrayInput } from '../../../../core';
+import './ArrayBase.css';
 export declare const ArrayBase: ArrayInput;

package/build/esm/lib/kit/components/Inputs/ArrayBase/ArrayBase.js

@@ -1,27 +1,17 @@
 import React from 'react';
 import { Plus } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
+import { Button, Icon, Label } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isCorrectSpec, isObjectSpec, transformArrIn, } from '../../../../core';
+import { block } from '../../../utils';
+import './ArrayBase.css';
+const b = block('array-base');
 export const ArrayBase = ({ spec, name, arrayInput, input }) => {
     const keys = React.useMemo(() => Object.keys(arrayInput.value || {})
         .filter((k) => k !== OBJECT_ARRAY_FLAG && k !== OBJECT_ARRAY_CNT)
         .map((k) => k.split('<').join('').split('>').join(''))
         .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
     const itemSpecCorrect = React.useMemo(() => isCorrectSpec(spec.items), [spec.items]);
-    const onItemAdd = React.useCallback(() => {
-        var _a;
-        let item;
-        if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
-            if (isArraySpec(spec.items)) {
-                item = { [OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0 };
-            }
-            else if (isObjectSpec(spec.items)) {
-                item = {};
-            }
-        }
-        arrayInput.onItemAdd(item);
-    }, [arrayInput.onItemAdd, spec.items]);
     const getItemSpec = React.useCallback((idx) => {
         if (!itemSpecCorrect) {
             return null;
@@ -33,22 +23,67 @@ export const ArrayBase = ({ spec, name, arrayInput, input }) => {
         return itemSpec;
     }, [spec.items, itemSpecCorrect]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const AddButton = React.useCallback(() => {
+        let onClick = () => {
+            var _a;
+            let item;
+            if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
+                if (isArraySpec(spec.items)) {
+                    item = { [OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0 };
+                }
+                else if (isObjectSpec(spec.items)) {
+                    item = {};
+                }
+            }
+            arrayInput.onItemAdd(item);
+        };
+        let qa = `${name}-add-item`;
+        let title = spec.viewSpec.itemLabel;
+        if (!arrayInput.value && spec.defaultValue) {
+            onClick = () => {
+                input.onChange(transformArrIn(spec.defaultValue));
+            };
+            qa = `${name}-init-arr`;
+            title = spec.viewSpec.layoutTitle;
+        }
+        return (React.createElement(Button, { onClick: onClick, disabled: spec.viewSpec.disabled, qa: qa, className: b('add-button', { right: spec.viewSpec.addButtonPosition === 'right' }) },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            title || null));
+    }, [
+        arrayInput,
+        input,
+        name,
+        spec.defaultValue,
+        spec.items,
+        spec.viewSpec.disabled,
+        spec.viewSpec.itemLabel,
+        spec.viewSpec.layoutTitle,
+    ]);
     const items = React.useMemo(() => keys.map((key, idx) => {
         var _a;
         const itemSpec = getItemSpec(idx);
         if (!itemSpec) {
             return null;
         }
-        return (React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
-    }), [keys.join(''), name, getItemSpec, parentOnChange, input.parentOnUnmount, input.value]);
+        const showItemPrefix = idx !== 0 && spec.viewSpec.itemPrefix;
+        return (React.createElement(React.Fragment, { key: `${name}.<${key}>` },
+            showItemPrefix ? (React.createElement(Label, { size: "m", className: b('item-prefix') }, spec.viewSpec.itemPrefix)) : null,
+            React.createElement(Controller, { value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, spec: itemSpec, name: `${name}.<${key}>` })));
+    }), [
+        keys.join(''),
+        name,
+        getItemSpec,
+        parentOnChange,
+        input.parentOnUnmount,
+        input.value,
+        spec.viewSpec.itemPrefix,
+    ]);
     if (!itemSpecCorrect) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        items,
-        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled, qa: `${name}-init-arr` },
-            React.createElement(Icon, { data: Plus, size: 14 }),
-            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled, qa: `${name}-add-item` },
-            React.createElement(Icon, { data: Plus, size: 14 }),
-            spec.viewSpec.itemLabel || null))));
+    return (React.createElement("div", { className: b({ 'add-button-right': spec.viewSpec.addButtonPosition === 'right' }) },
+        React.createElement("div", { className: b('items-wrapper', {
+                'add-button-down': spec.viewSpec.addButtonPosition !== 'right' && keys.length > 0,
+            }) }, items),
+        React.createElement(AddButton, null)));
 };

package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plus, Xmark } from '@gravity-ui/icons';
+import { Plus, TrashBin } from '@gravity-ui/icons';
 import { Button, Icon, Table } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
@@ -38,8 +38,8 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             id: 'remove',
             name: '',
             sticky: 'right',
-            template: ({ key }) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
-                React.createElement(Icon, { data: Xmark, size: 16 }))),
+            template: ({ key }) => (React.createElement(Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
+                React.createElement(Icon, { data: TrashBin, size: 16 }))),
         };
         const columns = table.map(({ property, label }) => ({
             id: property,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
-import { Xmark } from '@gravity-ui/icons';
+import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
 import { ErrorWrapper } from '../../../components';
@@ -19,8 +19,8 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-                arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
-                    React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
+                arrayItem ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    React.createElement(Icon, { data: TrashBin, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };
 export const Row = (props) => (React.createElement(RowBase, Object.assign({}, props)));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Xmark } from '@gravity-ui/icons';
+import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
 import { ErrorWrapper } from '../../../components';
@@ -15,7 +15,7 @@ export const Row2 = ({ name, spec, input, meta, children, }) => {
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-                isArrayItem(name) ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
-                    React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
+                isArrayItem(name) ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    React.createElement(Icon, { data: TrashBin, size: 16 }))) : null),
             spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Xmark } from '@gravity-ui/icons';
+import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
 import { ErrorWrapper } from '../../../components';
@@ -11,8 +11,8 @@ export const Transparent = ({ name, spec, input, meta, children, }) => {
     const arrOrObjFlag = React.useMemo(() => isArraySpec(spec) || isObjectSpec(spec), [spec]);
     const removeButton = React.useMemo(() => {
         if (arrayItem) {
-            return (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
-                React.createElement(Icon, { data: Xmark, size: 16 })));
+            return (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                React.createElement(Icon, { data: TrashBin, size: 16 })));
         }
         return null;
     }, [input.onDrop, arrayItem, name]);

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

@@ -22,7 +22,7 @@
 }
 .df-simple-vertical-accordeon__title_size_s {
   margin-bottom: 0;
-  font-size: var(--yc-text-body-font-size);
+  font-size: var(--yc-text-body-1-font-size);
 }
 .df-simple-vertical-accordeon__title_size_m {
   margin-bottom: 1px;

package/build/esm/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.css

@@ -0,0 +1,4 @@
+.df-array-base-view__item-prefix {
+  margin-top: -10px;
+  margin-bottom: 15px;
+}

package/build/esm/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.d.ts

@@ -0,0 +1,3 @@
+import { ArrayView } from '../../../../core';
+import './ArrayBaseView.css';
+export declare const ArrayBaseView: ArrayView;

package/build/esm/lib/kit/components/Views/{ArrayBaseView.js → ArrayBaseView/ArrayBaseView.js}

@@ -1,6 +1,10 @@
 import React from 'react';
+import { Label } from '@gravity-ui/uikit';
 import _ from 'lodash';
-import { ViewController, isCorrectSpec } from '../../../core';
+import { ViewController, isCorrectSpec } from '../../../../core';
+import { block } from '../../../utils';
+import './ArrayBaseView.css';
+const b = block('array-base-view');
 export const ArrayBaseView = ({ spec, name, value = [] }) => {
     const itemSpecCorrect = React.useMemo(() => isCorrectSpec(spec.items), [spec.items]);
     const getItemSpec = React.useCallback((idx) => {
@@ -18,8 +22,11 @@ export const ArrayBaseView = ({ spec, name, value = [] }) => {
         if (!itemSpec) {
             return null;
         }
-        return (React.createElement(ViewController, { spec: itemSpec, name: `${name}[${idx}]`, key: `${name}[${idx}]` }));
-    }), [value.length, name, getItemSpec]);
+        const showItemPrefix = idx !== 0 && spec.viewSpec.itemPrefix;
+        return (React.createElement(React.Fragment, { key: `${name}[${idx}]` },
+            showItemPrefix ? (React.createElement(Label, { size: "m", className: b('item-prefix') }, spec.viewSpec.itemPrefix)) : null,
+            React.createElement(ViewController, { spec: itemSpec, name: `${name}[${idx}]` })));
+    }), [value.length, name, getItemSpec, spec.viewSpec.itemPrefix]);
     if (!itemSpecCorrect) {
         return null;
     }

package/build/esm/lib/kit/components/Views/ArrayBaseView/index.d.ts

@@ -0,0 +1 @@
+export * from './ArrayBaseView';

package/build/esm/lib/kit/components/Views/ArrayBaseView/index.js

@@ -0,0 +1 @@
+export * from './ArrayBaseView';

package/build/esm/lib/kit/utils/common.js

@@ -31,7 +31,7 @@ export const isNotEmptyValue = (value, spec) => {
     return true;
 };
 export const prepareSpec = (spec, parseJsonDefaultValue) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (_.isObjectLike(spec)) {
         const result = _.cloneDeep(spec);
         if (_.isString(result.type)) {
@@ -43,7 +43,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_d) {
+                catch (_e) {
                     _defaultValue = undefined;
                 }
             }
@@ -61,7 +61,10 @@ export const prepareSpec = (spec, parseJsonDefaultValue) => {
         if (_.isString((_b = result.viewSpec) === null || _b === void 0 ? void 0 : _b.layout)) {
             result.viewSpec.layout = result.viewSpec.layout.toLowerCase();
         }
-        if (_.isString((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.themeLabel)) {
+        if (_.isString((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.addButtonPosition)) {
+            result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
+        }
+        if (_.isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
             result.viewSpec.themeLabel = result.viewSpec.themeLabel.toLowerCase();
         }
         if (_.isString(result.validator)) {

package/build/esm/lib/kit/validators/validators.js

@@ -66,7 +66,8 @@ export const getNumberValidator = (params = {}) => {
         }
         if (!ignoreMinimumCheck &&
             _.isNumber(spec.minimum) &&
-            ((stringValue.length && spec.minimum > Number(stringValue)) || !stringValue.length)) {
+            stringValue.length &&
+            spec.minimum > Number(stringValue)) {
             return ErrorMessages.minNumber(spec.minimum);
         }
         if (_.isString(spec.format) && stringValue.length) {

package/package.json

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

package/build/esm/lib/kit/components/Views/ArrayBaseView.d.ts

@@ -1,2 +0,0 @@
-import { ArrayView } from '../../../core';
-export declare const ArrayBaseView: ArrayView;