@gravity-ui/page-constructor 6.3.2-alpha.6 → 6.3.2-alpha.9

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
-@import '~@diplodoc/transform/dist/css/yfm.css';
+@import '@diplodoc/transform/dist/css/yfm.css';
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 :root {

package/build/cjs/editor-v2/components/BlockCard/BlockCard.css

@@ -0,0 +1,27 @@
+.pceditor-block-card {
+  padding: 8px;
+  cursor: grab;
+  user-select: none;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  gap: 4px;
+  max-width: 300px;
+}
+.pceditor-block-card:active {
+  background-color: var(--g-color-base-generic-hover);
+  cursor: grabbing;
+}
+.pceditor-block-card__image-img {
+  pointer-events: none;
+}
+.pceditor-block-card__name {
+  justify-self: flex-end;
+  color: var(--g-color-text-secondary);
+}
+.pceditor-block-card__icon {
+  color: var(--g-color-text-complementary);
+}

package/build/cjs/editor-v2/components/BlockCard/BlockCard.d.ts

@@ -0,0 +1,9 @@
+export interface BlockCardProps {
+    className?: string;
+    type: string;
+    name: string;
+    previewImg?: string;
+    onMouseDown: (type: string) => void;
+}
+declare const BlockCard: ({ className, type, name, previewImg, onMouseDown }: BlockCardProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockCard;

package/build/cjs/editor-v2/components/BlockCard/BlockCard.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('block-card');
+const BlockCard = ({ className, type, name, previewImg, onMouseDown }) => {
+    const handleMouseDown = React.useCallback(() => {
+        onMouseDown(type);
+    }, [onMouseDown, type]);
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(null, className), onMouseDown: handleMouseDown, children: [(0, jsx_runtime_1.jsx)("div", { className: b('image'), children: previewImg ? ((0, jsx_runtime_1.jsx)("img", { className: b('image-img'), src: previewImg, alt: "" })) : ((0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), size: 45, data: icons_1.SquareBars })) }), (0, jsx_runtime_1.jsx)("div", { className: b('name'), children: name })] }));
+};
+exports.default = BlockCard;
+//# sourceMappingURL=BlockCard.js.map

package/build/cjs/editor-v2/components/BlockCard/BlockCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockCard.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/BlockCard/BlockCard.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6C;AAC7C,6CAA6C;AAC7C,qDAA+B;AAE/B,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAUjC,MAAM,SAAS,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAiB,EAAE,EAAE;IACnF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,OAAO,CACH,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,WAAW,EAAE,eAAe,aAC7D,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,UAAU,CAAC,CAAC,CAAC,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC7D,CAAC,CAAC,CAAC,CACA,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,kBAAU,GAAI,CAC7D,GACC,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,IACpC,CACV,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import {SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockCard.scss';\n\nconst b = editorCn('block-card');\n\nexport interface BlockCardProps {\n    className?: string;\n    type: string;\n    name: string;\n    previewImg?: string;\n    onMouseDown: (type: string) => void;\n}\n\nconst BlockCard = ({className, type, name, previewImg, onMouseDown}: BlockCardProps) => {\n    const handleMouseDown = React.useCallback(() => {\n        onMouseDown(type);\n    }, [onMouseDown, type]);\n\n    return (\n        <Card className={b(null, className)} onMouseDown={handleMouseDown}>\n            <div className={b('image')}>\n                {previewImg ? (\n                    <img className={b('image-img')} src={previewImg} alt=\"\" />\n                ) : (\n                    <Icon className={b('icon')} size={45} data={SquareBars} />\n                )}\n            </div>\n            <div className={b('name')}>{name}</div>\n        </Card>\n    );\n};\n\nexport default BlockCard;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.css

@@ -0,0 +1,5 @@
+.pceditor-dynamic-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.d.ts

@@ -1,9 +1,10 @@
 import { ConfigInput, DynamicFormValue } from "../../../common/types/index.js";
 interface DynamicFormProps {
     blockConfig: Array<ConfigInput>;
-    contentConfig?: DynamicFormValue;
-    onUpdate: (key: string, value: DynamicFormValue) => void;
+    contentConfig?: object;
+    onUpdateByKey?: (key: string, value: DynamicFormValue) => void;
+    onUpdate?: (value: object) => void;
     className?: string;
 }
-declare const DynamicForm: ({ blockConfig, onUpdate, contentConfig }: DynamicFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicForm: ({ blockConfig, onUpdateByKey, onUpdate, contentConfig }: DynamicFormProps) => import("react/jsx-runtime").JSX.Element;
 export default DynamicForm;

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.js

@@ -16,8 +16,18 @@ const Text_1 = tslib_1.__importDefault(require("./Fields/Text/Text.js"));
 const TextArea_1 = tslib_1.__importDefault(require("./Fields/TextArea/TextArea.js"));
 const utils_1 = require("./utils.js");
 const b = (0, cn_1.editorCn)('dynamic-form');
-const DynamicForm = ({ blockConfig, onUpdate, contentConfig }) => {
+const DynamicForm = ({ blockConfig, onUpdateByKey, onUpdate, contentConfig }) => {
     const inputs = blockConfig;
+    const onDataUpdate = React.useCallback((key, value) => {
+        if (onUpdateByKey) {
+            onUpdateByKey(key, value);
+        }
+        if (onUpdate && contentConfig) {
+            const newContentConfig = lodash_1.default.cloneDeep(contentConfig);
+            lodash_1.default.set(newContentConfig, key, value);
+            onUpdate(newContentConfig);
+        }
+    }, [onUpdateByKey, onUpdate, contentConfig]);
     const getData = React.useCallback((variable) => {
         if (variable.startsWith('block.')) {
             const purePath = variable.replace('block.', '');
@@ -58,33 +68,33 @@ const DynamicForm = ({ blockConfig, onUpdate, contentConfig }) => {
         }
         // Text, Select, Boolean and etc
         const onSimpleDynamicFieldUpdate = (value) => {
-            onUpdate(fieldPath, value);
+            onDataUpdate(fieldPath, value);
         };
         // Array and Objects
         const onComplexDynamicFieldUpdate = (key, value) => {
-            onUpdate((0, utils_1.getFullPath)(fieldPath, key), value);
+            onDataUpdate((0, utils_1.getFullPath)(fieldPath, key), value);
         };
         switch (input.type) {
             case 'text': {
-                return ((0, jsx_runtime_1.jsx)(Text_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+                return ((0, jsx_runtime_1.jsx)(Text_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
             }
             case 'boolean': {
-                return ((0, jsx_runtime_1.jsx)(Boolean_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+                return ((0, jsx_runtime_1.jsx)(Boolean_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
             }
             case 'textarea': {
-                return ((0, jsx_runtime_1.jsx)(TextArea_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+                return ((0, jsx_runtime_1.jsx)(TextArea_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
             }
             case 'select': {
-                return ((0, jsx_runtime_1.jsx)(Select_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+                return ((0, jsx_runtime_1.jsx)(Select_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
             }
             case 'number': {
-                return ((0, jsx_runtime_1.jsx)(Number_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+                return ((0, jsx_runtime_1.jsx)(Number_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
             }
             case 'object': {
                 if (!input || !('properties' in input)) {
                     return null;
                 }
-                return ((0, jsx_runtime_1.jsx)(Object_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+                return ((0, jsx_runtime_1.jsx)(Object_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
             }
             case 'array': {
                 return ((0, jsx_runtime_1.jsx)(Array_1.default, { blockConfig: input, title: input.title, values: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
@@ -105,7 +115,7 @@ const DynamicForm = ({ blockConfig, onUpdate, contentConfig }) => {
                 return (0, jsx_runtime_1.jsxs)("div", { children: ["Ignore ", JSON.stringify(input)] });
             }
         }
-    }, [contentConfig, decide, onUpdate]);
+    }, [contentConfig, decide, onDataUpdate]);
     const sortedInputs = inputs.sort((x, y) => {
         const nestingFieldTypes = ['object', 'array', 'oneOf', 'anyOf'];
         if (nestingFieldTypes.includes(x.type)) {

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":";;;;AAAA,4DAAuB;AACvB,qDAA+B;AAG/B,0CAAwC;AAGxC,4EAAqD;AACrD,kFAA2D;AAC3D,+EAAwD;AACxD,+EAAwD;AACxD,4EAAqD;AACrD,4EAAqD;AACrD,+EAAwD;AACxD,yEAAkD;AAClD,qFAA8D;AAC9D,sCAAgD;AAEhD,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,cAAc,CAAC,CAAC;AASnC,MAAM,WAAW,GAAG,CAAC,EAAC,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAmB,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,WAAW,CAAC;IAE3B,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC7B,CAAC,QAAgB,EAAE,EAAE;QACjB,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChC,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAChD,OAAO,gBAAC,CAAC,GAAG,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC;QAED,IACI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YACpD,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtD,CAAC;YACC,oCAAoC;YACpC,OAAO,QAAQ,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC5D,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAC5B,CAAC,MAAc,EAAW,EAAE;QACxB,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEhC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACxB,sCAAsC;YACtC,OAAO,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC;YACzD,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,CAAC,aAAa,EAAE,MAAM,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC;QAEtD,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,KAAK,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;QAEtC,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;YACnB,OAAO,KAAK,KAAK,KAAK,CAAC;QAC3B,CAAC;aAAM,CAAC;YACJ,OAAO,KAAK,KAAK,KAAK,CAAC;QAC3B,CAAC;IACL,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAkB,EAAE,EAAE;QACnB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAEzD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAEtC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACZ,OAAO,8DAAoB,KAAK,CAAC,IAAI,IAAO,CAAC;YACjD,CAAC;QACL,CAAC;QAED,gCAAgC;QAChC,MAAM,0BAA0B,GAAG,CAAC,KAAuB,EAAE,EAAE;YAC3D,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,oBAAoB;QACpB,MAAM,2BAA2B,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;YACzE,QAAQ,CAAC,IAAA,mBAAW,EAAC,SAAS,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACjB,KAAK,MAAM,CAAC,CAAC,CAAC;gBACV,OAAO,CACH,uBAAC,cAAgB,IACb,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,0BAA0B,GACtC,CACL,CAAC;YACN,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACb,OAAO,CACH,uBAAC,iBAAmB,IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,0BAA0B,GACtC,CACL,CAAC;YACN,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBACd,OAAO,CACH,uBAAC,kBAAoB,IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,0BAA0B,GACtC,CACL,CAAC;YACN,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACZ,OAAO,CACH,uBAAC,gBAAkB,IACf,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,0BAA0B,GACtC,CACL,CAAC;YACN,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACZ,OAAO,CACH,uBAAC,gBAAkB,IACf,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,0BAA0B,GACtC,CACL,CAAC;YACN,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACZ,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,YAAY,IAAI,KAAK,CAAC,EAAE,CAAC;oBACrC,OAAO,IAAI,CAAC;gBAChB,CAAC;gBAED,OAAO,CACH,uBAAC,gBAAkB,IACf,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,WAAW,EAAE,KAAK,CAAC,UAAU,EAC7B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,2BAA2B,GACvC,CACL,CAAC;YACN,CAAC;YACD,KAAK,OAAO,CAAC,CAAC,CAAC;gBACX,OAAO,CACH,uBAAC,eAAiB,IACd,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,2BAA2B,GACvC,CACL,CAAC;YACN,CAAC;YACD,KAAK,OAAO,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,EAAE,CAAC;oBAClC,OAAO,IAAI,CAAC;gBAChB,CAAC;gBAED,OAAO,CACH,uBAAC,eAAiB,IACd,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,2BAA2B,GACvC,CACL,CAAC;YACN,CAAC;YACD,KAAK,OAAO,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,EAAE,CAAC;oBAClC,OAAO,IAAI,CAAC;gBAChB,CAAC;gBAED,OAAO,CACH,uBAAC,eAAiB,IACd,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,2BAA2B,GACvC,CACL,CAAC;YACN,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACN,OAAO,uDAAa,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAO,CAAC;YACrD,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,CACpC,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QAChE,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,CAAC;QACb,CAAC;QACD,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,CAAC,CAAC;QACd,CAAC;QACD,OAAO,CAAC,CAAC;IACb,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACd,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,uBAAC,KAAK,CAAC,QAAQ,cAAc,WAAW,CAAC,KAAK,CAAC,IAA1B,KAAK,CAAuC,CACpE,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\n\nimport {ConfigInput, DynamicFormValue} from '../../../common/types';\nimport {editorCn} from '../../utils/cn';\n\nimport './DynamicForm.scss';\nimport ArrayDynamicField from './Fields/Array/Array';\nimport BooleanDynamicField from './Fields/Boolean/Boolean';\nimport NumberDynamicField from './Fields/Number/Number';\nimport ObjectDynamicField from './Fields/Object/Object';\nimport AnyOfDynamicField from './Fields/AnyOf/AnyOf';\nimport OneOfDynamicField from './Fields/OneOf/OneOf';\nimport SelectDynamicField from './Fields/Select/Select';\nimport TextDynamicField from './Fields/Text/Text';\nimport TextAreaDynamicField from './Fields/TextArea/TextArea';\nimport {getContent, getFullPath} from './utils';\n\nconst b = editorCn('dynamic-form');\n\ninterface DynamicFormProps {\n    blockConfig: Array<ConfigInput>;\n    contentConfig?: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    className?: string;\n}\n\nconst DynamicForm = ({blockConfig, onUpdate, contentConfig}: DynamicFormProps) => {\n    const inputs = blockConfig;\n\n    const getData = React.useCallback(\n        (variable: string) => {\n            if (variable.startsWith('block.')) {\n                const purePath = variable.replace('block.', '');\n                return _.get(contentConfig, purePath);\n            }\n\n            if (\n                (variable.startsWith(`'`) && variable.endsWith(`'`)) ||\n                (variable.startsWith(`\"`) && variable.endsWith(`\"`))\n            ) {\n                // @ts-ignore TODO: replaceAll types\n                return variable.replaceAll(`'`, '').replaceAll(`\"`, '');\n            }\n\n            return undefined;\n        },\n        [contentConfig],\n    );\n\n    const decide = React.useCallback(\n        (showIf: string): boolean => {\n            const parts = showIf.split(' ');\n\n            if (!(parts.length === 3)) {\n                // eslint-disable-next-line no-console\n                console.log('Something bad happened in showIf, ignored');\n                return true;\n            }\n\n            const [firstVariable, equals, secondVariable] = parts;\n\n            const data1 = getData(firstVariable);\n            const data2 = getData(secondVariable);\n\n            if (equals === '===') {\n                return data1 === data2;\n            } else {\n                return data1 !== data2;\n            }\n        },\n        [getData],\n    );\n\n    const renderInput = React.useCallback(\n        (input: ConfigInput) => {\n            const fieldPath = input.name;\n            const fieldValue = getContent(contentConfig, input.name);\n\n            if (input.showIf) {\n                const decision = decide(input.showIf);\n\n                if (!decision) {\n                    return <div>Hidden Field: {input.name}</div>;\n                }\n            }\n\n            // Text, Select, Boolean and etc\n            const onSimpleDynamicFieldUpdate = (value: DynamicFormValue) => {\n                onUpdate(fieldPath, value);\n            };\n\n            // Array and Objects\n            const onComplexDynamicFieldUpdate = (key: string, value: DynamicFormValue) => {\n                onUpdate(getFullPath(fieldPath, key), value);\n            };\n\n            switch (input.type) {\n                case 'text': {\n                    return (\n                        <TextDynamicField\n                            onRefresh={(value) => onUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'boolean': {\n                    return (\n                        <BooleanDynamicField\n                            onRefresh={(value) => onUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'textarea': {\n                    return (\n                        <TextAreaDynamicField\n                            onRefresh={(value) => onUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'select': {\n                    return (\n                        <SelectDynamicField\n                            onRefresh={(value) => onUpdate(fieldPath, value)}\n                            input={input}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'number': {\n                    return (\n                        <NumberDynamicField\n                            onRefresh={(value) => onUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'object': {\n                    if (!input || !('properties' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <ObjectDynamicField\n                            onRefresh={(value) => onUpdate(fieldPath, value)}\n                            blockConfig={input.properties}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'array': {\n                    return (\n                        <ArrayDynamicField\n                            blockConfig={input}\n                            title={input.title}\n                            values={fieldValue}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'oneOf': {\n                    if (!input || !('options' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <OneOfDynamicField\n                            inputConfig={input}\n                            contentConfig={contentConfig}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'anyOf': {\n                    if (!input || !('options' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <AnyOfDynamicField\n                            inputConfig={input}\n                            contentConfig={contentConfig}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                default: {\n                    return <div>Ignore {JSON.stringify(input)}</div>;\n                }\n            }\n        },\n        [contentConfig, decide, onUpdate],\n    );\n\n    const sortedInputs = inputs.sort((x, y) => {\n        const nestingFieldTypes = ['object', 'array', 'oneOf', 'anyOf'];\n        if (nestingFieldTypes.includes(x.type)) {\n            return 1;\n        }\n        if (nestingFieldTypes.includes(y.type)) {\n            return -1;\n        }\n        return 0;\n    });\n\n    return (\n        <div className={b()}>\n            {sortedInputs.map((input, index) => (\n                <React.Fragment key={index}>{renderInput(input)}</React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default DynamicForm;\n"]}
+{"version":3,"file":"DynamicForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\n\nimport {ConfigInput, DynamicFormValue} from '../../../common/types';\nimport {editorCn} from '../../utils/cn';\n\nimport ArrayDynamicField from './Fields/Array/Array';\nimport BooleanDynamicField from './Fields/Boolean/Boolean';\nimport NumberDynamicField from './Fields/Number/Number';\nimport ObjectDynamicField from './Fields/Object/Object';\nimport AnyOfDynamicField from './Fields/AnyOf/AnyOf';\nimport OneOfDynamicField from './Fields/OneOf/OneOf';\nimport SelectDynamicField from './Fields/Select/Select';\nimport TextDynamicField from './Fields/Text/Text';\nimport TextAreaDynamicField from './Fields/TextArea/TextArea';\nimport {getContent, getFullPath} from './utils';\n\nimport './DynamicForm.scss';\n\nconst b = editorCn('dynamic-form');\n\ninterface DynamicFormProps {\n    blockConfig: Array<ConfigInput>;\n    contentConfig?: object;\n    onUpdateByKey?: (key: string, value: DynamicFormValue) => void;\n    onUpdate?: (value: object) => void;\n    className?: string;\n}\n\nconst DynamicForm = ({blockConfig, onUpdateByKey, onUpdate, contentConfig}: DynamicFormProps) => {\n    const inputs = blockConfig;\n\n    const onDataUpdate = React.useCallback(\n        (key: string, value: DynamicFormValue) => {\n            if (onUpdateByKey) {\n                onUpdateByKey(key, value);\n            }\n            if (onUpdate && contentConfig) {\n                const newContentConfig = _.cloneDeep(contentConfig);\n                _.set(newContentConfig, key, value);\n                onUpdate(newContentConfig);\n            }\n        },\n        [onUpdateByKey, onUpdate, contentConfig],\n    );\n\n    const getData = React.useCallback(\n        (variable: string) => {\n            if (variable.startsWith('block.')) {\n                const purePath = variable.replace('block.', '');\n                return _.get(contentConfig, purePath);\n            }\n\n            if (\n                (variable.startsWith(`'`) && variable.endsWith(`'`)) ||\n                (variable.startsWith(`\"`) && variable.endsWith(`\"`))\n            ) {\n                // @ts-ignore TODO: replaceAll types\n                return variable.replaceAll(`'`, '').replaceAll(`\"`, '');\n            }\n\n            return undefined;\n        },\n        [contentConfig],\n    );\n\n    const decide = React.useCallback(\n        (showIf: string): boolean => {\n            const parts = showIf.split(' ');\n\n            if (!(parts.length === 3)) {\n                // eslint-disable-next-line no-console\n                console.log('Something bad happened in showIf, ignored');\n                return true;\n            }\n\n            const [firstVariable, equals, secondVariable] = parts;\n\n            const data1 = getData(firstVariable);\n            const data2 = getData(secondVariable);\n\n            if (equals === '===') {\n                return data1 === data2;\n            } else {\n                return data1 !== data2;\n            }\n        },\n        [getData],\n    );\n\n    const renderInput = React.useCallback(\n        (input: ConfigInput) => {\n            const fieldPath = input.name;\n            const fieldValue = getContent(contentConfig, input.name);\n\n            if (input.showIf) {\n                const decision = decide(input.showIf);\n\n                if (!decision) {\n                    return <div>Hidden Field: {input.name}</div>;\n                }\n            }\n\n            // Text, Select, Boolean and etc\n            const onSimpleDynamicFieldUpdate = (value: DynamicFormValue) => {\n                onDataUpdate(fieldPath, value);\n            };\n\n            // Array and Objects\n            const onComplexDynamicFieldUpdate = (key: string, value: DynamicFormValue) => {\n                onDataUpdate(getFullPath(fieldPath, key), value);\n            };\n\n            switch (input.type) {\n                case 'text': {\n                    return (\n                        <TextDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'boolean': {\n                    return (\n                        <BooleanDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'textarea': {\n                    return (\n                        <TextAreaDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'select': {\n                    return (\n                        <SelectDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            input={input}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'number': {\n                    return (\n                        <NumberDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'object': {\n                    if (!input || !('properties' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <ObjectDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            blockConfig={input.properties}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'array': {\n                    return (\n                        <ArrayDynamicField\n                            blockConfig={input}\n                            title={input.title}\n                            values={fieldValue}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'oneOf': {\n                    if (!input || !('options' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <OneOfDynamicField\n                            inputConfig={input}\n                            contentConfig={contentConfig}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'anyOf': {\n                    if (!input || !('options' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <AnyOfDynamicField\n                            inputConfig={input}\n                            contentConfig={contentConfig}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                default: {\n                    return <div>Ignore {JSON.stringify(input)}</div>;\n                }\n            }\n        },\n        [contentConfig, decide, onDataUpdate],\n    );\n\n    const sortedInputs = inputs.sort((x, y) => {\n        const nestingFieldTypes = ['object', 'array', 'oneOf', 'anyOf'];\n        if (nestingFieldTypes.includes(x.type)) {\n            return 1;\n        }\n        if (nestingFieldTypes.includes(y.type)) {\n            return -1;\n        }\n        return 0;\n    });\n\n    return (\n        <div className={b()}>\n            {sortedInputs.map((input, index) => (\n                <React.Fragment key={index}>{renderInput(input)}</React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default DynamicForm;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.css

@@ -1,17 +1,15 @@
 .pceditor-field-base {
-  padding: 16px 12px 16px 0;
-  border-bottom: 1px solid var(--g-color-line-generic);
+  padding: 0;
   position: relative;
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: stretch;
 }
 .pceditor-field-base:hover > .pceditor-field-base__top .pceditor-field-base__title > .pceditor-field-base__button {
   opacity: 1;
 }
 .pceditor-field-base_expandable {
   flex-direction: column;
-  gap: 16px;
 }
 .pceditor-field-base_expandable > .pceditor-field-base__top {
   width: 100%;
@@ -24,12 +22,11 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  flex: 0 0 84px;
   word-break: break-word;
 }
-.pceditor-field-base__children {
-  flex: 2 1 auto;
-  margin-left: 12px;
+.pceditor-field-base__children_expandable {
+  border-left: 3px solid var(--g-color-line-generic);
+  padding: 6px 12px;
 }
 .pceditor-field-base__foldable {
   width: 100%;
@@ -37,6 +34,15 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+  padding: 6px 0;
+  border-top-left-radius: var(--g-border-radius-m);
+  border-top-right-radius: var(--g-border-radius-m);
+}
+.pceditor-field-base__foldable:hover {
+  color: var(--g-color-text-link-hover);
+}
+.pceditor-field-base__foldable:active {
+  color: var(--g-color-text-link-active);
 }
 .pceditor-field-base__non-foldable:before {
   position: absolute;
@@ -45,15 +51,18 @@
 .pceditor-field-base__button {
   transition: opacity 0.3s ease;
   opacity: 0;
+  margin-left: 2px;
 }
 .pceditor-field-base__title {
   font-family: var(--g-text-body-font-family);
   font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  font-weight: 500;
   margin: 5px 16px 5px 0;
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 .pceditor-field-base__title_size_s {
   font-family: var(--g-text-body-font-family);

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.js

@@ -12,10 +12,10 @@ const FieldBase = ({ className, title, textSize = 's', children, expandable = fa
     const [showChildren, setShowChildren] = React.useState(!expandable);
     const titleComponent = React.useMemo(() => {
         if (title) {
-            const defaultTitle = ((0, jsx_runtime_1.jsxs)("div", { className: b('title', { size: textSize }), children: [onRefresh && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), onClick: (e) => {
+            const defaultTitle = ((0, jsx_runtime_1.jsxs)("div", { className: b('title', { size: textSize }), children: [(0, jsx_runtime_1.jsx)("span", { children: lodash_1.default.capitalize(title) }), onRefresh && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), onClick: (e) => {
                             e.stopPropagation();
                             onRefresh(undefined);
-                        }, view: 'flat', size: 'xs', children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 14 }) })), (0, jsx_runtime_1.jsx)("span", { children: lodash_1.default.capitalize(title) })] }));
+                        }, view: 'flat', size: 'xs', children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 14 }) }))] }));
             if (expandable) {
                 return (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
@@ -25,7 +25,7 @@ const FieldBase = ({ className, title, textSize = 's', children, expandable = fa
         }
         return null;
     }, [expandable, showChildren, textSize, title, onRefresh]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ expandable }, className), children: [title && (0, jsx_runtime_1.jsx)("div", { className: b('top'), children: titleComponent }), (!title || showChildren) && (0, jsx_runtime_1.jsx)("div", { className: b('children'), children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ expandable }, className), children: [title && (0, jsx_runtime_1.jsx)("div", { className: b('top'), children: titleComponent }), (!title || showChildren) && ((0, jsx_runtime_1.jsx)("div", { className: b('children', { expandable }), children: children }))] }));
 };
 exports.default = FieldBase;
 //# sourceMappingURL=FieldBase.js.map

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBase.js","sourceRoot":"../../../../../../src","sources":["editor-v2/components/DynamicForm/FieldBase/FieldBase.tsx"],"names":[],"mappings":";;;;AAAA,6CAA4D;AAC5D,6CAAkD;AAClD,4DAAuB;AACvB,qDAA+B;AAE/B,6CAA2C;AAI3C,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAajC,MAAM,SAAS,GAA6B,CAAC,EACzC,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,GAAG,EACd,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAEpE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,YAAY,GAAG,CACjB,iCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,aACvC,SAAS,IAAI,CACV,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;4BAChD,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,SAAS,CAAC,SAAS,CAAC,CAAC;wBACzB,CAAC,EACD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,IAAI,YAEV,uBAAC,YAAI,IAAC,IAAI,EAAE,uBAAe,EAAE,IAAI,EAAE,EAAE,GAAI,GACpC,CACZ,EACD,2CAAO,gBAAC,CAAC,UAAU,CAAC,KAAK,CAAC,GAAQ,IAChC,CACT,CAAC;YAEF,IAAI,UAAU,EAAE,CAAC;gBACb,OAAO;gBACH,yGAAyG;gBACzG,iCAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,aACvE,YAAY,EACb,uBAAC,mBAAW,IACR,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,GAC9B,IACA,CACT,CAAC;YACN,CAAC;YAED,OAAO,gCAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAAG,YAAY,GAAO,CAAC;QACnE,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAC,EAAE,SAAS,CAAC,aACrC,KAAK,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,YAAG,cAAc,GAAO,EACzD,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,YAAG,QAAQ,GAAO,IAC1E,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import {ArrowToggle, Button, Icon} from '@gravity-ui/uikit';\nimport {ArrowRotateLeft} from '@gravity-ui/icons';\nimport _ from 'lodash';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../utils/cn';\n\nimport './FieldBase.scss';\n\nconst b = editorCn('field-base');\n\nexport interface FieldBaseParams {\n    title?: string;\n    textSize?: 's' | 'm' | 'l';\n    onRefresh?: (value: undefined) => void;\n    expandable?: boolean;\n}\n\nexport interface FieldBaseProps extends React.PropsWithChildren, FieldBaseParams {\n    className?: string;\n}\n\nconst FieldBase: React.FC<FieldBaseProps> = ({\n    className,\n    title,\n    textSize = 's',\n    children,\n    expandable = false,\n    onRefresh,\n}) => {\n    const [showChildren, setShowChildren] = React.useState(!expandable);\n\n    const titleComponent = React.useMemo(() => {\n        if (title) {\n            const defaultTitle = (\n                <div className={b('title', {size: textSize})}>\n                    {onRefresh && (\n                        <Button\n                            className={b('button')}\n                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                                e.stopPropagation();\n                                onRefresh(undefined);\n                            }}\n                            view={'flat'}\n                            size={'xs'}\n                        >\n                            <Icon data={ArrowRotateLeft} size={14} />\n                        </Button>\n                    )}\n                    <span>{_.capitalize(title)}</span>\n                </div>\n            );\n\n            if (expandable) {\n                return (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <div className={b('foldable')} onClick={() => setShowChildren(!showChildren)}>\n                        {defaultTitle}\n                        <ArrowToggle\n                            direction={showChildren ? 'bottom' : 'right'}\n                            className={b('arrow-toggle')}\n                        />\n                    </div>\n                );\n            }\n\n            return <div className={b('non-foldable')}>{defaultTitle}</div>;\n        }\n\n        return null;\n    }, [expandable, showChildren, textSize, title, onRefresh]);\n\n    return (\n        <div className={b({expandable}, className)}>\n            {title && <div className={b('top')}>{titleComponent}</div>}\n            {(!title || showChildren) && <div className={b('children')}>{children}</div>}\n        </div>\n    );\n};\n\nexport default FieldBase;\n"]}
+{"version":3,"file":"FieldBase.js","sourceRoot":"../../../../../../src","sources":["editor-v2/components/DynamicForm/FieldBase/FieldBase.tsx"],"names":[],"mappings":";;;;AAAA,6CAA4D;AAC5D,6CAAkD;AAClD,4DAAuB;AACvB,qDAA+B;AAE/B,6CAA2C;AAI3C,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAajC,MAAM,SAAS,GAA6B,CAAC,EACzC,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,GAAG,EACd,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAEpE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,YAAY,GAAG,CACjB,iCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,aACxC,2CAAO,gBAAC,CAAC,UAAU,CAAC,KAAK,CAAC,GAAQ,EACjC,SAAS,IAAI,CACV,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;4BAChD,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,SAAS,CAAC,SAAS,CAAC,CAAC;wBACzB,CAAC,EACD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,IAAI,YAEV,uBAAC,YAAI,IAAC,IAAI,EAAE,uBAAe,EAAE,IAAI,EAAE,EAAE,GAAI,GACpC,CACZ,IACC,CACT,CAAC;YAEF,IAAI,UAAU,EAAE,CAAC;gBACb,OAAO;gBACH,yGAAyG;gBACzG,iCAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,aACvE,YAAY,EACb,uBAAC,mBAAW,IACR,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,GAC9B,IACA,CACT,CAAC;YACN,CAAC;YAED,OAAO,gCAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAAG,YAAY,GAAO,CAAC;QACnE,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAC,EAAE,SAAS,CAAC,aACrC,KAAK,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,YAAG,cAAc,GAAO,EACzD,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,UAAU,EAAC,CAAC,YAAG,QAAQ,GAAO,CAChE,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import {ArrowToggle, Button, Icon} from '@gravity-ui/uikit';\nimport {ArrowRotateLeft} from '@gravity-ui/icons';\nimport _ from 'lodash';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../utils/cn';\n\nimport './FieldBase.scss';\n\nconst b = editorCn('field-base');\n\nexport interface FieldBaseParams {\n    title?: string;\n    textSize?: 's' | 'm' | 'l';\n    onRefresh?: (value: undefined) => void;\n    expandable?: boolean;\n}\n\nexport interface FieldBaseProps extends React.PropsWithChildren, FieldBaseParams {\n    className?: string;\n}\n\nconst FieldBase: React.FC<FieldBaseProps> = ({\n    className,\n    title,\n    textSize = 's',\n    children,\n    expandable = false,\n    onRefresh,\n}) => {\n    const [showChildren, setShowChildren] = React.useState(!expandable);\n\n    const titleComponent = React.useMemo(() => {\n        if (title) {\n            const defaultTitle = (\n                <div className={b('title', {size: textSize})}>\n                    <span>{_.capitalize(title)}</span>\n                    {onRefresh && (\n                        <Button\n                            className={b('button')}\n                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                                e.stopPropagation();\n                                onRefresh(undefined);\n                            }}\n                            view={'flat'}\n                            size={'xs'}\n                        >\n                            <Icon data={ArrowRotateLeft} size={14} />\n                        </Button>\n                    )}\n                </div>\n            );\n\n            if (expandable) {\n                return (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <div className={b('foldable')} onClick={() => setShowChildren(!showChildren)}>\n                        {defaultTitle}\n                        <ArrowToggle\n                            direction={showChildren ? 'bottom' : 'right'}\n                            className={b('arrow-toggle')}\n                        />\n                    </div>\n                );\n            }\n\n            return <div className={b('non-foldable')}>{defaultTitle}</div>;\n        }\n\n        return null;\n    }, [expandable, showChildren, textSize, title, onRefresh]);\n\n    return (\n        <div className={b({expandable}, className)}>\n            {title && <div className={b('top')}>{titleComponent}</div>}\n            {(!title || showChildren) && (\n                <div className={b('children', {expandable})}>{children}</div>\n            )}\n        </div>\n    );\n};\n\nexport default FieldBase;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.js

@@ -29,7 +29,7 @@ const AnyOfDynamicField = ({ contentConfig, onUpdate, className, inputConfig, })
                     })), value: anyOfMetaValue, onUpdate: onUpdateAnyOf })) : ((0, jsx_runtime_1.jsx)(uikit_1.Select, { options: inputConfig.options.map((option) => ({
                         content: option.title,
                         value: option.value,
-                    })), value: anyOfMetaValue ? [anyOfMetaValue] : [], onUpdate: ([selectValue]) => onUpdateAnyOf(selectValue), className: b('select') })), anyOfChosenOption && ((0, jsx_runtime_1.jsx)(DynamicForm_1.default, { blockConfig: anyOfChosenOption.properties, contentConfig: anyOfContentConfig, onUpdate: onUpdate }))] }) }));
+                    })), value: anyOfMetaValue ? [anyOfMetaValue] : [], onUpdate: ([selectValue]) => onUpdateAnyOf(selectValue), className: b('select') })), anyOfChosenOption && ((0, jsx_runtime_1.jsx)(DynamicForm_1.default, { blockConfig: anyOfChosenOption.properties, contentConfig: anyOfContentConfig, onUpdateByKey: onUpdate }))] }) }));
 };
 exports.default = AnyOfDynamicField;
 //# sourceMappingURL=AnyOf.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnyOf.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Card, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {AnyOfInput, DynamicFormValue} from '../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\n\nimport './AnyOf.scss';\n\nconst b = editorCn('anyof-dynamic-field');\n\ninterface AnyOfDynamicFieldProps {\n    contentConfig: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    inputConfig: AnyOfInput;\n    className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getAnyOfContentConfig = (contentConfig: any, name: string) => {\n    if (name) {\n        return contentConfig ? contentConfig[name] : {};\n    }\n    return contentConfig;\n};\n\nconst AnyOfDynamicField = ({\n    contentConfig,\n    onUpdate,\n    className,\n    inputConfig,\n}: AnyOfDynamicFieldProps) => {\n    const defaultValue = inputConfig.options[0].value;\n\n    const [anyOfMetaValue, setAnyOfMetaValue] = React.useState(defaultValue);\n\n    const anyOfContentConfig = getAnyOfContentConfig(contentConfig, inputConfig.name);\n    const anyOfChosenOption = React.useMemo(\n        () =>\n            inputConfig.options.find(\n                ({value: foundAnyOfValue}) => foundAnyOfValue === anyOfMetaValue,\n            ),\n        [inputConfig.options, anyOfMetaValue],\n    );\n\n    const onUpdateAnyOf = React.useCallback((value: string) => {\n        setAnyOfMetaValue(value);\n    }, []);\n\n    return (\n        <FieldBase\n            title={inputConfig.title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            <Card>\n                {inputConfig.options.length < 4 ? (\n                    <SegmentedRadioGroup\n                        className={b('radio')}\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={anyOfMetaValue}\n                        onUpdate={onUpdateAnyOf}\n                    />\n                ) : (\n                    <Select\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={anyOfMetaValue ? [anyOfMetaValue] : []}\n                        onUpdate={([selectValue]) => onUpdateAnyOf(selectValue)}\n                        className={b('select')}\n                    />\n                )}\n                {anyOfChosenOption && (\n                    <DynamicForm\n                        blockConfig={anyOfChosenOption.properties}\n                        contentConfig={anyOfContentConfig}\n                        onUpdate={onUpdate}\n                    />\n                )}\n            </Card>\n        </FieldBase>\n    );\n};\n\nexport default AnyOfDynamicField;\n"]}
+{"version":3,"file":"AnyOf.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Card, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {AnyOfInput, DynamicFormValue} from '../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\n\nimport './AnyOf.scss';\n\nconst b = editorCn('anyof-dynamic-field');\n\ninterface AnyOfDynamicFieldProps {\n    contentConfig: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    inputConfig: AnyOfInput;\n    className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getAnyOfContentConfig = (contentConfig: any, name: string) => {\n    if (name) {\n        return contentConfig ? contentConfig[name] : {};\n    }\n    return contentConfig;\n};\n\nconst AnyOfDynamicField = ({\n    contentConfig,\n    onUpdate,\n    className,\n    inputConfig,\n}: AnyOfDynamicFieldProps) => {\n    const defaultValue = inputConfig.options[0].value;\n\n    const [anyOfMetaValue, setAnyOfMetaValue] = React.useState(defaultValue);\n\n    const anyOfContentConfig = getAnyOfContentConfig(contentConfig, inputConfig.name);\n    const anyOfChosenOption = React.useMemo(\n        () =>\n            inputConfig.options.find(\n                ({value: foundAnyOfValue}) => foundAnyOfValue === anyOfMetaValue,\n            ),\n        [inputConfig.options, anyOfMetaValue],\n    );\n\n    const onUpdateAnyOf = React.useCallback((value: string) => {\n        setAnyOfMetaValue(value);\n    }, []);\n\n    return (\n        <FieldBase\n            title={inputConfig.title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            <Card>\n                {inputConfig.options.length < 4 ? (\n                    <SegmentedRadioGroup\n                        className={b('radio')}\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={anyOfMetaValue}\n                        onUpdate={onUpdateAnyOf}\n                    />\n                ) : (\n                    <Select\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={anyOfMetaValue ? [anyOfMetaValue] : []}\n                        onUpdate={([selectValue]) => onUpdateAnyOf(selectValue)}\n                        className={b('select')}\n                    />\n                )}\n                {anyOfChosenOption && (\n                    <DynamicForm\n                        blockConfig={anyOfChosenOption.properties}\n                        contentConfig={anyOfContentConfig}\n                        onUpdateByKey={onUpdate}\n                    />\n                )}\n            </Card>\n        </FieldBase>\n    );\n};\n\nexport default AnyOfDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/Array.css

@@ -1,9 +1,10 @@
 .pceditor-array-dynamic-field__card {
   padding: 12px;
   margin-top: 12px;
+  border-left: 3px solid var(--g-color-line-generic);
 }
 .pceditor-array-dynamic-field__card:first-child {
-  margin-bottom: 0;
+  margin-top: 0;
 }
 .pceditor-array-dynamic-field__row {
   display: flex;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/Array.js

@@ -44,7 +44,7 @@ const ArrayDynamicField = ({ title, values, onUpdate, className, blockConfig })
                 if (!blockConfig.properties) {
                     return null;
                 }
-                return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b('card'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${b('row')} ${b('card-head')}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('row-title'), children: ["#", index] }), arrayItemButton] }), (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig.properties, onUpdate: (key, updateValue) => onUpdate(`[${index}].${key}`, updateValue) })] }, index));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: b('card'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${b('row')} ${b('card-head')}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('row-title'), children: ["Item ", index + 1] }), arrayItemButton] }), (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig.properties, onUpdateByKey: (key, updateValue) => onUpdate(`[${index}].${key}`, updateValue) })] }, index));
             }
             default: {
                 return null;
@@ -62,7 +62,7 @@ const ArrayDynamicField = ({ title, values, onUpdate, className, blockConfig })
             return ((0, jsx_runtime_1.jsx)("div", { className: b('empty'), children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { className: b('add-button'), onClick: onAddItem, children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }), "Please, add new item"] }) }));
         }
     }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);
-    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: (0, jsx_runtime_1.jsx)(uikit_1.Card, { className: b('card'), children: renderInputs() }) }));
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: renderInputs() }));
 };
 exports.default = ArrayDynamicField;
 //# sourceMappingURL=Array.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/Array.js.map

@@ -1 +1 @@
-{"version":3,"file":"Array.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Array/Array.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Plus} from '@gravity-ui/icons';\nimport {Button, Card, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ArrayObjectInput, ArrayTextInput, DynamicFormValue} from '../../../../../common/types';\nimport {removeFromArray, swapArrayItems} from '../../../../utils';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\nimport Text from '../Text/Text';\n\nimport './Array.scss';\nimport ItemButton from './ItemButton/ItemButton';\n\nconst b = editorCn('array-dynamic-field');\n\ntype ArrayInput = ArrayTextInput | ArrayObjectInput;\n\ninterface ArrayFieldProps {\n    title: string;\n    values: Array<DynamicFormValue>;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    blockConfig: ArrayInput;\n    className?: string;\n}\n\nconst ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: ArrayFieldProps) => {\n    const haveItems = values && Array.isArray(values) && values.length;\n\n    const onAddItem = React.useCallback(() => {\n        if (blockConfig.arrayType === 'text') {\n            onUpdate('', haveItems ? [...values, ''] : ['']);\n        } else if (blockConfig.arrayType === 'object') {\n            onUpdate('', haveItems ? [...values, {}] : [{}]);\n        }\n    }, [blockConfig.arrayType, haveItems, onUpdate, values]);\n\n    const onDeleteItem = React.useCallback(\n        (index: number) => {\n            if (Array.isArray(values)) {\n                const newArray = removeFromArray(values, index);\n                onUpdate('', newArray);\n            }\n        },\n        [onUpdate, values],\n    );\n\n    const onReorderItem = React.useCallback(\n        (index: number, placement: 'up' | 'down') => {\n            if (Array.isArray(values)) {\n                const newArray = swapArrayItems(\n                    values,\n                    index,\n                    placement === 'up' ? index - 1 : index + 1,\n                );\n                onUpdate('', newArray);\n            }\n        },\n        [onUpdate, values],\n    );\n\n    const renderInput = React.useCallback(\n        (value: DynamicFormValue, index: number) => {\n            const arrayItemButton = (\n                <ItemButton\n                    onRemove={() => onDeleteItem(index)}\n                    onReorderUp={() => onReorderItem(index, 'up')}\n                    onReorderDown={() => onReorderItem(index, 'down')}\n                    disableReorderUp={index === 0}\n                    disableReorderDown={Boolean(haveItems) && values.length === index + 1}\n                />\n            );\n\n            switch (blockConfig.arrayType) {\n                case 'text': {\n                    return (\n                        <div className={b('row')}>\n                            <Text\n                                className={b('row-field')}\n                                value={String(value)}\n                                onUpdate={(updateValue) => onUpdate(`[${index}]`, updateValue)}\n                                onRefresh={(updatedValue) => onUpdate('', updatedValue)}\n                            />\n                            {arrayItemButton}\n                        </div>\n                    );\n                }\n                case 'object': {\n                    if (!blockConfig.properties) {\n                        return null;\n                    }\n                    return (\n                        <Card key={index} className={b('card')}>\n                            <div className={`${b('row')} ${b('card-head')}`}>\n                                <div className={b('row-title')}>#{index}</div>\n                                {arrayItemButton}\n                            </div>\n                            <DynamicForm\n                                contentConfig={value}\n                                blockConfig={blockConfig.properties}\n                                onUpdate={(key, updateValue) =>\n                                    onUpdate(`[${index}].${key}`, updateValue)\n                                }\n                            />\n                        </Card>\n                    );\n                }\n                default: {\n                    return null;\n                }\n            }\n        },\n        [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values],\n    );\n\n    const renderInputs = React.useCallback(() => {\n        if (haveItems) {\n            const renderItems = values\n                .map(renderInput)\n                .filter(Boolean) as unknown as React.ReactNode[];\n            return (\n                <React.Fragment>\n                    {renderItems}\n                    <Button className={b('add-button')} onClick={onAddItem}>\n                        <Icon data={Plus} />\n                        {blockConfig.buttonText}\n                    </Button>\n                </React.Fragment>\n            );\n        } else {\n            return (\n                <div className={b('empty')}>\n                    <Button className={b('add-button')} onClick={onAddItem}>\n                        <Icon data={Plus} />\n                        Please, add new item\n                    </Button>\n                </div>\n            );\n        }\n    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);\n\n    return (\n        <FieldBase\n            title={title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            <Card className={b('card')}>{renderInputs()}</Card>\n        </FieldBase>\n    );\n};\n\nexport default ArrayDynamicField;\n"]}
+{"version":3,"file":"Array.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Array/Array.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ArrayObjectInput, ArrayTextInput, DynamicFormValue} from '../../../../../common/types';\nimport {removeFromArray, swapArrayItems} from '../../../../utils';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\nimport Text from '../Text/Text';\n\nimport './Array.scss';\nimport ItemButton from './ItemButton/ItemButton';\n\nconst b = editorCn('array-dynamic-field');\n\ntype ArrayInput = ArrayTextInput | ArrayObjectInput;\n\ninterface ArrayFieldProps {\n    title: string;\n    values: Array<DynamicFormValue>;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    blockConfig: ArrayInput;\n    className?: string;\n}\n\nconst ArrayDynamicField = ({title, values, onUpdate, className, blockConfig}: ArrayFieldProps) => {\n    const haveItems = values && Array.isArray(values) && values.length;\n\n    const onAddItem = React.useCallback(() => {\n        if (blockConfig.arrayType === 'text') {\n            onUpdate('', haveItems ? [...values, ''] : ['']);\n        } else if (blockConfig.arrayType === 'object') {\n            onUpdate('', haveItems ? [...values, {}] : [{}]);\n        }\n    }, [blockConfig.arrayType, haveItems, onUpdate, values]);\n\n    const onDeleteItem = React.useCallback(\n        (index: number) => {\n            if (Array.isArray(values)) {\n                const newArray = removeFromArray(values, index);\n                onUpdate('', newArray);\n            }\n        },\n        [onUpdate, values],\n    );\n\n    const onReorderItem = React.useCallback(\n        (index: number, placement: 'up' | 'down') => {\n            if (Array.isArray(values)) {\n                const newArray = swapArrayItems(\n                    values,\n                    index,\n                    placement === 'up' ? index - 1 : index + 1,\n                );\n                onUpdate('', newArray);\n            }\n        },\n        [onUpdate, values],\n    );\n\n    const renderInput = React.useCallback(\n        (value: DynamicFormValue, index: number) => {\n            const arrayItemButton = (\n                <ItemButton\n                    onRemove={() => onDeleteItem(index)}\n                    onReorderUp={() => onReorderItem(index, 'up')}\n                    onReorderDown={() => onReorderItem(index, 'down')}\n                    disableReorderUp={index === 0}\n                    disableReorderDown={Boolean(haveItems) && values.length === index + 1}\n                />\n            );\n\n            switch (blockConfig.arrayType) {\n                case 'text': {\n                    return (\n                        <div className={b('row')}>\n                            <Text\n                                className={b('row-field')}\n                                value={String(value)}\n                                onUpdate={(updateValue) => onUpdate(`[${index}]`, updateValue)}\n                                onRefresh={(updatedValue) => onUpdate('', updatedValue)}\n                            />\n                            {arrayItemButton}\n                        </div>\n                    );\n                }\n                case 'object': {\n                    if (!blockConfig.properties) {\n                        return null;\n                    }\n                    return (\n                        <div key={index} className={b('card')}>\n                            <div className={`${b('row')} ${b('card-head')}`}>\n                                <div className={b('row-title')}>Item {index + 1}</div>\n                                {arrayItemButton}\n                            </div>\n                            <DynamicForm\n                                contentConfig={value as object}\n                                blockConfig={blockConfig.properties}\n                                onUpdateByKey={(key, updateValue) =>\n                                    onUpdate(`[${index}].${key}`, updateValue)\n                                }\n                            />\n                        </div>\n                    );\n                }\n                default: {\n                    return null;\n                }\n            }\n        },\n        [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values],\n    );\n\n    const renderInputs = React.useCallback(() => {\n        if (haveItems) {\n            const renderItems = values\n                .map(renderInput)\n                .filter(Boolean) as unknown as React.ReactNode[];\n            return (\n                <React.Fragment>\n                    {renderItems}\n                    <Button className={b('add-button')} onClick={onAddItem}>\n                        <Icon data={Plus} />\n                        {blockConfig.buttonText}\n                    </Button>\n                </React.Fragment>\n            );\n        } else {\n            return (\n                <div className={b('empty')}>\n                    <Button className={b('add-button')} onClick={onAddItem}>\n                        <Icon data={Plus} />\n                        Please, add new item\n                    </Button>\n                </div>\n            );\n        }\n    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);\n\n    return (\n        <FieldBase\n            title={title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            {renderInputs()}\n        </FieldBase>\n    );\n};\n\nexport default ArrayDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Object/Object.d.ts

@@ -1,7 +1,7 @@
 import { ConfigInput, DynamicFormValue } from "../../../../../common/types/index.js";
 import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
 interface ObjectDynamicFieldProps extends FieldBaseParams {
-    value: DynamicFormValue;
+    value: object;
     onUpdate: (key: string, value: DynamicFormValue) => void;
     blockConfig: Array<ConfigInput>;
     className?: string;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Object/Object.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const uikit_1 = require("@gravity-ui/uikit");
 const DynamicForm_1 = tslib_1.__importDefault(require("../../DynamicForm.js"));
 const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
 const ObjectDynamicField = ({ title, value, onUpdate, className, blockConfig, }) => {
-    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: className, onRefresh: (updatedValue) => onUpdate('', updatedValue), expandable: true, children: (0, jsx_runtime_1.jsx)(uikit_1.Card, { children: (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig, onUpdate: onUpdate }) }) }));
+    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: className, onRefresh: (updatedValue) => onUpdate('', updatedValue), expandable: true, children: (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig, onUpdateByKey: onUpdate }) }));
 };
 exports.default = ObjectDynamicField;
 //# sourceMappingURL=Object.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/Object/Object.js.map

@@ -1 +1 @@
-{"version":3,"file":"Object.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Object/Object.tsx"],"names":[],"mappings":";;;;AAAA,6CAAuC;AAGvC,+EAA4C;AAC5C,qFAAqE;AASrE,MAAM,kBAAkB,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,GACW,EAAE,EAAE;IAC1B,OAAO,CACH,uBAAC,mBAAS,IACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,YAAY,CAAC,EACvD,UAAU,kBAEV,uBAAC,YAAI,cACD,uBAAC,qBAAW,IAAC,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAChF,GACC,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import {Card} from '@gravity-ui/uikit';\n\nimport {ConfigInput, DynamicFormValue} from '../../../../../common/types';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\ninterface ObjectDynamicFieldProps extends FieldBaseParams {\n    value: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    blockConfig: Array<ConfigInput>;\n    className?: string;\n}\n\nconst ObjectDynamicField = ({\n    title,\n    value,\n    onUpdate,\n    className,\n    blockConfig,\n}: ObjectDynamicFieldProps) => {\n    return (\n        <FieldBase\n            title={title}\n            className={className}\n            onRefresh={(updatedValue) => onUpdate('', updatedValue)}\n            expandable\n        >\n            <Card>\n                <DynamicForm contentConfig={value} blockConfig={blockConfig} onUpdate={onUpdate} />\n            </Card>\n        </FieldBase>\n    );\n};\n\nexport default ObjectDynamicField;\n"]}
+{"version":3,"file":"Object.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/Object/Object.tsx"],"names":[],"mappings":";;;;AACA,+EAA4C;AAC5C,qFAAqE;AASrE,MAAM,kBAAkB,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,GACW,EAAE,EAAE;IAC1B,OAAO,CACH,uBAAC,mBAAS,IACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,YAAY,CAAC,EACvD,UAAU,kBAEV,uBAAC,qBAAW,IAAC,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,GAAI,GAChF,CACf,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import {ConfigInput, DynamicFormValue} from '../../../../../common/types';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase, {FieldBaseParams} from '../../FieldBase/FieldBase';\n\ninterface ObjectDynamicFieldProps extends FieldBaseParams {\n    value: object;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    blockConfig: Array<ConfigInput>;\n    className?: string;\n}\n\nconst ObjectDynamicField = ({\n    title,\n    value,\n    onUpdate,\n    className,\n    blockConfig,\n}: ObjectDynamicFieldProps) => {\n    return (\n        <FieldBase\n            title={title}\n            className={className}\n            onRefresh={(updatedValue) => onUpdate('', updatedValue)}\n            expandable\n        >\n            <DynamicForm contentConfig={value} blockConfig={blockConfig} onUpdateByKey={onUpdate} />\n        </FieldBase>\n    );\n};\n\nexport default ObjectDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.css

@@ -1,5 +1,5 @@
 .pceditor-oneof-dynamic-field__radio {
-  margin: 16px 12px;
+  margin-bottom: 12px;
 }
 .pceditor-oneof-dynamic-field__select {
   min-width: 80px;

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.js

@@ -23,13 +23,13 @@ const OneOfDynamicField = ({ contentConfig, onUpdate, className, inputConfig, })
     const onUpdateOneOf = React.useCallback((value) => {
         setOneOfMetaValue(value);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: inputConfig.title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: (0, jsx_runtime_1.jsxs)(uikit_1.Card, { children: [inputConfig.options.length < 4 ? ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { className: b('radio'), options: inputConfig.options.map((option) => ({
-                        content: option.title,
-                        value: option.value,
-                    })), value: oneOfMetaValue, onUpdate: onUpdateOneOf })) : ((0, jsx_runtime_1.jsx)(uikit_1.Select, { options: inputConfig.options.map((option) => ({
-                        content: option.title,
-                        value: option.value,
-                    })), value: oneOfMetaValue ? [oneOfMetaValue] : [], onUpdate: ([selectValue]) => onUpdateOneOf(selectValue), className: b('select') })), oneOfChosenOption && ((0, jsx_runtime_1.jsx)(DynamicForm_1.default, { blockConfig: oneOfChosenOption.properties, contentConfig: oneOfContentConfig, onUpdate: onUpdate }))] }) }));
+    return ((0, jsx_runtime_1.jsxs)(FieldBase_1.default, { title: inputConfig.title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: [inputConfig.options.length < 4 ? ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { className: b('radio'), options: inputConfig.options.map((option) => ({
+                    content: option.title,
+                    value: option.value,
+                })), value: oneOfMetaValue, onUpdate: onUpdateOneOf })) : ((0, jsx_runtime_1.jsx)(uikit_1.Select, { options: inputConfig.options.map((option) => ({
+                    content: option.title,
+                    value: option.value,
+                })), value: oneOfMetaValue ? [oneOfMetaValue] : [], onUpdate: ([selectValue]) => onUpdateOneOf(selectValue), className: b('select') })), oneOfChosenOption && ((0, jsx_runtime_1.jsx)(DynamicForm_1.default, { blockConfig: oneOfChosenOption.properties, contentConfig: oneOfContentConfig, onUpdateByKey: onUpdate }))] }));
 };
 exports.default = OneOfDynamicField;
 //# sourceMappingURL=OneOf.js.map

package/build/cjs/editor-v2/components/DynamicForm/Fields/OneOf/OneOf.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneOf.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/OneOf/OneOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Card, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {DynamicFormValue, OneOfInput} from '../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\n\nimport './OneOf.scss';\n\nconst b = editorCn('oneof-dynamic-field');\n\ninterface OneOfDynamicFieldProps {\n    contentConfig: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    inputConfig: OneOfInput;\n    className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getOneOfContentConfig = (contentConfig: any, name: string) => {\n    if (name) {\n        return contentConfig ? contentConfig[name] : {};\n    }\n    return contentConfig;\n};\n\nconst OneOfDynamicField = ({\n    contentConfig,\n    onUpdate,\n    className,\n    inputConfig,\n}: OneOfDynamicFieldProps) => {\n    const defaultValue = inputConfig.options[0].value;\n\n    const [oneOfMetaValue, setOneOfMetaValue] = React.useState(defaultValue);\n\n    const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);\n    const oneOfChosenOption = React.useMemo(\n        () =>\n            inputConfig.options.find(\n                ({value: foundOneOfValue}) => foundOneOfValue === oneOfMetaValue,\n            ),\n        [inputConfig.options, oneOfMetaValue],\n    );\n\n    const onUpdateOneOf = React.useCallback((value: string) => {\n        setOneOfMetaValue(value);\n    }, []);\n\n    return (\n        <FieldBase\n            title={inputConfig.title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            <Card>\n                {inputConfig.options.length < 4 ? (\n                    <SegmentedRadioGroup\n                        className={b('radio')}\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={oneOfMetaValue}\n                        onUpdate={onUpdateOneOf}\n                    />\n                ) : (\n                    <Select\n                        options={inputConfig.options.map((option) => ({\n                            content: option.title,\n                            value: option.value,\n                        }))}\n                        value={oneOfMetaValue ? [oneOfMetaValue] : []}\n                        onUpdate={([selectValue]) => onUpdateOneOf(selectValue)}\n                        className={b('select')}\n                    />\n                )}\n                {oneOfChosenOption && (\n                    <DynamicForm\n                        blockConfig={oneOfChosenOption.properties}\n                        contentConfig={oneOfContentConfig}\n                        onUpdate={onUpdate}\n                    />\n                )}\n            </Card>\n        </FieldBase>\n    );\n};\n\nexport default OneOfDynamicField;\n"]}
+{"version":3,"file":"OneOf.js","sourceRoot":"../../../../../../../src","sources":["editor-v2/components/DynamicForm/Fields/OneOf/OneOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import {SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {DynamicFormValue, OneOfInput} from '../../../../../common/types';\nimport {editorCn} from '../../../../utils/cn';\nimport DynamicForm from '../../DynamicForm';\nimport FieldBase from '../../FieldBase/FieldBase';\n\nimport './OneOf.scss';\n\nconst b = editorCn('oneof-dynamic-field');\n\ninterface OneOfDynamicFieldProps {\n    contentConfig: DynamicFormValue;\n    onUpdate: (key: string, value: DynamicFormValue) => void;\n    inputConfig: OneOfInput;\n    className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getOneOfContentConfig = (contentConfig: any, name: string) => {\n    if (name) {\n        return contentConfig ? contentConfig[name] : {};\n    }\n    return contentConfig;\n};\n\nconst OneOfDynamicField = ({\n    contentConfig,\n    onUpdate,\n    className,\n    inputConfig,\n}: OneOfDynamicFieldProps) => {\n    const defaultValue = inputConfig.options[0].value;\n\n    const [oneOfMetaValue, setOneOfMetaValue] = React.useState(defaultValue);\n\n    const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);\n    const oneOfChosenOption = React.useMemo(\n        () =>\n            inputConfig.options.find(\n                ({value: foundOneOfValue}) => foundOneOfValue === oneOfMetaValue,\n            ),\n        [inputConfig.options, oneOfMetaValue],\n    );\n\n    const onUpdateOneOf = React.useCallback((value: string) => {\n        setOneOfMetaValue(value);\n    }, []);\n\n    return (\n        <FieldBase\n            title={inputConfig.title}\n            className={b(null, className)}\n            onRefresh={(value) => onUpdate('', value)}\n            expandable\n        >\n            {inputConfig.options.length < 4 ? (\n                <SegmentedRadioGroup\n                    className={b('radio')}\n                    options={inputConfig.options.map((option) => ({\n                        content: option.title,\n                        value: option.value,\n                    }))}\n                    value={oneOfMetaValue}\n                    onUpdate={onUpdateOneOf}\n                />\n            ) : (\n                <Select\n                    options={inputConfig.options.map((option) => ({\n                        content: option.title,\n                        value: option.value,\n                    }))}\n                    value={oneOfMetaValue ? [oneOfMetaValue] : []}\n                    onUpdate={([selectValue]) => onUpdateOneOf(selectValue)}\n                    className={b('select')}\n                />\n            )}\n            {oneOfChosenOption && (\n                <DynamicForm\n                    blockConfig={oneOfChosenOption.properties}\n                    contentConfig={oneOfContentConfig}\n                    onUpdateByKey={onUpdate}\n                />\n            )}\n        </FieldBase>\n    );\n};\n\nexport default OneOfDynamicField;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Select/Select.d.ts

@@ -3,8 +3,8 @@ import { FieldBaseParams } from "../../FieldBase/FieldBase.js";
 type SelectInput = SelectSingleInput | SelectMultipleInput;
 interface SelectDynamicFieldProps extends FieldBaseParams {
     input: SelectInput;
-    value: string;
-    onUpdate: (value: string | undefined) => void;
+    value: string | string[];
+    onUpdate: (value: string | string[] | undefined) => void;
     className?: string;
 }
 declare const SelectDynamicField: ({ input, value, onUpdate, className }: SelectDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;