@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.1

package/build/cjs/context/messagesContext/hooks/useMessageSender.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessageSender = void 0;
+const react_1 = require("react");
+const messagesContext_1 = require("../messagesContext");
+const useMessageSender = () => {
+    const { sendMessage } = (0, react_1.useContext)(messagesContext_1.PostMessageContext);
+    return sendMessage;
+};
+exports.useMessageSender = useMessageSender;
+exports.default = exports.useMessageSender;

package/build/cjs/context/messagesContext/hooks/useMessagesStore.d.ts

@@ -0,0 +1,2 @@
+export declare const useMessagesStore: () => import("../store").MessagesStore;
+export default useMessagesStore;

package/build/cjs/context/messagesContext/hooks/useMessagesStore.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessagesStore = void 0;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const messagesContext_1 = require("../messagesContext");
+const useMessagesStore = () => {
+    const { state } = (0, react_1.useContext)(messagesContext_1.PostMessageContext);
+    if (!state) {
+        throw new Error('Missing PostMessageContext');
+    }
+    return (0, zustand_1.useStore)(state);
+};
+exports.useMessagesStore = useMessagesStore;
+exports.default = exports.useMessagesStore;

package/build/cjs/context/messagesContext/index.d.ts

@@ -0,0 +1,5 @@
+export * from './messagesContext';
+export * from './messagesProvider';
+export * from './hooks/useMessageSender';
+export * from './hooks/useMessageObserver';
+export * from './hooks/useMessagesStore';

package/build/cjs/context/messagesContext/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./messagesContext"), exports);
+tslib_1.__exportStar(require("./messagesProvider"), exports);
+tslib_1.__exportStar(require("./hooks/useMessageSender"), exports);
+tslib_1.__exportStar(require("./hooks/useMessageObserver"), exports);
+tslib_1.__exportStar(require("./hooks/useMessagesStore"), exports);

package/build/cjs/context/messagesContext/messagesContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Context for sending messages between Editor and App
+ * Same exist in Editor
+ **/
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { Action, SendOptions } from '../../common/types';
+import { MessagesStore } from './store';
+export interface PostMessageContextProps {
+    state?: StoreApi<MessagesStore>;
+    sendMessage: (action: Action, options?: SendOptions) => void;
+}
+export declare const PostMessageContext: React.Context<PostMessageContextProps>;

package/build/cjs/context/messagesContext/messagesContext.js

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * Context for sending messages between Editor and App
+ * Same exist in Editor
+ **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PostMessageContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.PostMessageContext = react_1.default.createContext({
+    sendMessage: () => { },
+});

package/build/cjs/context/messagesContext/messagesProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const PostMessageProvider: ({ children }: PropsWithChildren) => JSX.Element;

package/build/cjs/context/messagesContext/messagesProvider.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PostMessageProvider = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const usePostMessage_1 = require("../../common/hooks/usePostMessage");
+const editorContext_1 = require("../editorContext");
+const messagesContext_1 = require("./messagesContext");
+const store_1 = require("./store");
+const PostMessageProvider = ({ children }) => {
+    var _a;
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current) {
+        storeRef.current = (0, store_1.createMessagesStore)();
+    }
+    const editorStore = (0, editorContext_1.useEditorStore)();
+    const storesWithReducer = [editorStore];
+    const { sendMessage } = (0, usePostMessage_1.usePostMessage)({
+        subscribers: (_a = storeRef.current) === null || _a === void 0 ? void 0 : _a.getState().subscribers,
+        storesWithReducer,
+    });
+    return (react_1.default.createElement(messagesContext_1.PostMessageContext.Provider, { value: {
+            state: storeRef.current,
+            sendMessage: sendMessage,
+        } }, children));
+};
+exports.PostMessageProvider = PostMessageProvider;

package/build/cjs/context/messagesContext/store.d.ts

@@ -0,0 +1,24 @@
+import { Subscriber, SubscriptionFunc } from '../../common/types';
+export interface MessagesState {
+    subscribers: Subscriber[];
+}
+export interface MessagesMethods {
+    subscribe: SubscriptionFunc;
+    unsubscribe: SubscriptionFunc;
+}
+export type MessagesStore = MessagesState & MessagesMethods;
+export declare const createMessagesStore: (overrideInitialState?: Partial<MessagesState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<MessagesState & MessagesMethods>, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: (MessagesState & MessagesMethods) | Partial<MessagesState & MessagesMethods> | ((state: MessagesState & MessagesMethods) => (MessagesState & MessagesMethods) | Partial<MessagesState & MessagesMethods>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<MessagesState & MessagesMethods, MessagesState & MessagesMethods>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: MessagesState & MessagesMethods) => void) => () => void;
+        onFinishHydration: (fn: (state: MessagesState & MessagesMethods) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<MessagesState & MessagesMethods, MessagesState & MessagesMethods>>;
+    };
+}>;

package/build/cjs/context/messagesContext/store.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMessagesStore = void 0;
+const store_1 = require("../../utils/store");
+exports.createMessagesStore = (0, store_1.initializeStore)({
+    subscribers: [],
+}, (set, _get) => ({
+    subscribe: (type, payloadCallback) => {
+        set((state) => (Object.assign(Object.assign({}, state), { subscribers: [...state.subscribers, { action: type, handler: payloadCallback }] })));
+        return () => {
+            set((state) => (Object.assign(Object.assign({}, state), { subscribers: state.subscribers.filter(({ handler, action }) => payloadCallback !== handler || type !== action) })));
+        };
+    },
+    unsubscribe: (type, payloadCallback) => {
+        set((state) => (Object.assign(Object.assign({}, state), { subscribers: state.subscribers.filter(({ handler, action }) => payloadCallback !== handler || type !== action) })));
+    },
+}));

package/build/cjs/editor/data/templates/test-editor-block.json

@@ -0,0 +1,18 @@
+{
+  "template": {
+    "type": "test-editor-block",
+    "title": "Lorem ipsum dolor sit amet",
+    "table": {
+      "content": [
+        ["Lorem", "ipsum 1", "dolor 2", "sit 3"],
+        ["Lorem 1", "0", "0", "0"],
+        ["Lorem 2", "0", "0", "1"],
+        ["Lorem 3", "0", "0", "1"],
+        ["Lorem 4", "0", "1", "1"],
+        ["Lorem 5", "1", "1", "1"]
+      ],
+      "legend": ["ipsum 1", "ipsum 2"],
+      "justify": ["start", "center", "center", "center"]
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-big-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-big-overlay__border {
+  pointer-events: none;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  background-color: var(--g-color-base-brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+interface BigOverlayProps extends ClassNameProps {
+}
+declare const BigOverlay: React.FC<BigOverlayProps>;
+export default BigOverlay;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const types_1 = require("../../../common/types");
+const utils_1 = require("../../../utils");
+const iframeContext_1 = require("../../context/iframeContext");
+const messagesContext_1 = require("../../context/messagesContext");
+const b = (0, utils_1.block)('big-overlay');
+const BigOverlay = ({ className }) => {
+    const { iframeElement } = (0, react_1.useContext)(iframeContext_1.IframeContext);
+    const [mousePosition, setMousePosition] = (0, react_1.useState)(undefined);
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.OverlayModeOnMove, (payload, meta) => {
+        if (payload && payload.cursor) {
+            const { x, y } = payload.cursor;
+            const iframeRect = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.getClientRects().item(0);
+            if (iframeRect) {
+                const newX = meta.source === 'editor' ? x : x + iframeRect.x;
+                const newY = meta.source === 'editor' ? y : y + iframeRect.y;
+                setMousePosition({ x: newX, y: newY });
+            }
+        }
+    }, [iframeElement]);
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.InsertModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.ReorderModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    return (react_1.default.createElement("div", { className: b(null, className) }, mousePosition ? (react_1.default.createElement("div", { className: b('border'), style: {
+            top: mousePosition.y,
+            left: mousePosition.x,
+        } },
+        react_1.default.createElement(icons_1.Stop, { height: 20, width: 20 }))) : null));
+};
+exports.default = BigOverlay;

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

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-block-config {
+  padding: 12px;
+}
+.pc-block-config__title {
+  margin-bottom: 16px;
+  margin-top: 8px;
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
+.pc-block-config__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+interface BlockConfigProps extends ClassNameProps {
+}
+declare const BlockConfig: React.FC<BlockConfigProps>;
+export default BlockConfig;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const editorContext_1 = require("../../context/editorContext");
+const utils_2 = require("../../utils");
+const DynamicForm_1 = tslib_1.__importDefault(require("../DynamicForm/DynamicForm"));
+const b = (0, utils_1.block)('block-config');
+const BlockConfig = ({ className }) => {
+    const { selectedBlock } = (0, editorContext_1.useEditorStore)();
+    const { config, blocks, subBlocks, updateField } = (0, contentConfig_1.useContentConfigStore)();
+    const currentBlockPath = (selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        ? (0, utils_2.generateChildrenPathFromArray)(selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        : '[]';
+    const currentConfig = lodash_1.default.get(config.blocks, currentBlockPath || '');
+    const currentSchema = [...blocks, ...subBlocks].find(({ type }) => type === (currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.type));
+    const onUpdate = (key, value) => {
+        updateField('blocks' + currentBlockPath + '.' + key, value);
+    };
+    if (!currentConfig) {
+        return react_1.default.createElement("div", { className: b('empty') }, "Select block for start");
+    }
+    if (!currentSchema) {
+        return react_1.default.createElement("div", { className: b('empty') },
+            "Not supported: ",
+            currentConfig.type);
+    }
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { className: b('title') }, currentSchema.schema.name),
+        react_1.default.createElement(DynamicForm_1.default, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate })));
+};
+exports.default = BlockConfig;

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

@@ -0,0 +1,42 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-blocks-list {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pc-blocks-list__card {
+  padding: 8px;
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 8px;
+}
+.pc-blocks-list__card:last-child {
+  margin-bottom: 0;
+}
+.pc-blocks-list__card:active {
+  background-color: var(--g-color-base-generic-hover);
+}
+.pc-blocks-list__title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+  margin-bottom: 10px;
+}
+.pc-blocks-list__section {
+  margin-bottom: 20px;
+}
+.pc-blocks-list__section:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ItemConfig } from '../../../common/types';
+export interface BlocksListProps {
+    blocks: ItemConfig[];
+}
+declare const BlocksList: (_p: PropsWithChildren<BlocksListProps>) => JSX.Element;
+export default BlocksList;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const types_1 = require("../../../common/types");
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const messagesContext_1 = require("../../context/messagesContext");
+const b = (0, utils_1.block)('blocks-list');
+const BlocksList = (_p) => {
+    const { blocks } = (0, contentConfig_1.useContentConfigStore)();
+    const sendMessage = (0, messagesContext_1.useMessageSender)();
+    const onMouseDown = (0, react_1.useCallback)((blockType) => {
+        sendMessage({ type: types_1.ActionTypes.InsertModeEnable, payload: { blockType } });
+    }, [sendMessage]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('section') },
+            react_1.default.createElement("div", { className: b('title') }, "Blocks"),
+            blocks.map(({ type, schema: { name } }) => (react_1.default.createElement(uikit_1.Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) }, name))))));
+};
+exports.default = BlocksList;

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

@@ -0,0 +1,2 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ConfigInput } from '../../../common/types';
+import { ClassNameProps, PageContent } from '../../../models';
+export type DynamicFormValue = string | number | [] | object | boolean | PageContent | undefined;
+interface DynamicFormProps extends ClassNameProps {
+    blockConfig: Array<ConfigInput>;
+    contentConfig: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+}
+declare const DynamicForm: React.FC<DynamicFormProps>;
+export default DynamicForm;

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const Array_1 = tslib_1.__importDefault(require("./Fields/Array/Array"));
+const Boolean_1 = tslib_1.__importDefault(require("./Fields/Boolean/Boolean"));
+const Number_1 = tslib_1.__importDefault(require("./Fields/Number/Number"));
+const Object_1 = tslib_1.__importDefault(require("./Fields/Object/Object"));
+const OneOf_1 = tslib_1.__importDefault(require("./Fields/OneOf/OneOf"));
+const Select_1 = tslib_1.__importDefault(require("./Fields/Select/Select"));
+const Text_1 = tslib_1.__importDefault(require("./Fields/Text/Text"));
+const TextArea_1 = tslib_1.__importDefault(require("./Fields/TextArea/TextArea"));
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('dynamic-form');
+const DynamicForm = (props) => {
+    const { blockConfig, onUpdate, contentConfig } = props;
+    const inputs = blockConfig;
+    const getData = (0, react_1.useCallback)((variable) => {
+        if (variable.startsWith('block.')) {
+            const purePath = variable.replace('block.', '');
+            return lodash_1.default.get(contentConfig, purePath);
+        }
+        if ((variable.startsWith(`'`) && variable.endsWith(`'`)) ||
+            (variable.startsWith(`"`) && variable.endsWith(`"`))) {
+            // @ts-ignore TODO: replaceAll types
+            return variable.replaceAll(`'`, '').replaceAll(`"`, '');
+        }
+        return undefined;
+    }, [contentConfig]);
+    const decide = (0, react_1.useCallback)((showIf) => {
+        const parts = showIf.split(' ');
+        if (!(parts.length === 3)) {
+            // eslint-disable-next-line no-console
+            console.log('Something bad happened in showIf, ignored');
+            return true;
+        }
+        const [firstVariable, equals, secondVariable] = parts;
+        const data1 = getData(firstVariable);
+        const data2 = getData(secondVariable);
+        if (equals === '===') {
+            return data1 === data2;
+        }
+        else {
+            return data1 !== data2;
+        }
+    }, [getData]);
+    const renderInput = (0, react_1.useCallback)((input) => {
+        const fieldPath = input.name;
+        const fieldValue = (0, utils_2.getContent)(contentConfig, input.name);
+        if (input.showIf) {
+            const decision = decide(input.showIf);
+            if (!decision) {
+                return react_1.default.createElement("div", null,
+                    "Hidden Field: ",
+                    input.name);
+            }
+        }
+        // Text, Select, Boolean and etc
+        const onSimpleDynamicFieldUpdate = (value) => {
+            onUpdate(fieldPath, value);
+        };
+        // Array and Objects
+        const onComplexDynamicFieldUpdate = (key, value) => {
+            onUpdate((0, utils_2.getFullPath)(fieldPath, key), value);
+        };
+        switch (input.type) {
+            case 'text': {
+                return (react_1.default.createElement(Text_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'boolean': {
+                return (react_1.default.createElement(Boolean_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'textarea': {
+                return (react_1.default.createElement(TextArea_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'select': {
+                return (react_1.default.createElement(Select_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'number': {
+                return (react_1.default.createElement(Number_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'object': {
+                if (!input || !('properties' in input)) {
+                    return null;
+                }
+                return (react_1.default.createElement(Object_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'array': {
+                return (react_1.default.createElement(Array_1.default, { blockConfig: input, title: input.title, values: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'oneOf': {
+                if (!input || !('options' in input)) {
+                    return null;
+                }
+                return (react_1.default.createElement(OneOf_1.default, { inputConfig: input, contentConfig: contentConfig, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            default: {
+                return react_1.default.createElement("div", null,
+                    "Ignore ",
+                    JSON.stringify(input));
+            }
+        }
+    }, [contentConfig, decide, onUpdate]);
+    const sortedInputs = inputs.sort((x, y) => {
+        const nestingFieldTypes = ['object', 'array', 'oneOf'];
+        if (nestingFieldTypes.includes(x.type)) {
+            return 1;
+        }
+        if (nestingFieldTypes.includes(y.type)) {
+            return -1;
+        }
+        return 0;
+    });
+    return (react_1.default.createElement("div", { className: b() }, sortedInputs.map((input, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index }, renderInput(input))))));
+};
+exports.default = DynamicForm;

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

@@ -0,0 +1,61 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-field-base {
+  position: relative;
+  margin-top: 20px;
+}
+.pc-field-base:hover > .pc-field-base__top > .pc-field-base__button {
+  opacity: 1;
+}
+.pc-field-base__top {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.pc-field-base__foldable {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.pc-field-base__non-foldable:before {
+  position: absolute;
+  right: calc(100% + 5px);
+}
+.pc-field-base__button {
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+.pc-field-base__title {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_l {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base:first-child {
+  margin-top: 0;
+}

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

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../../../models';
+export interface FieldBaseParams {
+    title?: string;
+    textSize?: 's' | 'm' | 'l';
+    onRefresh?: (value: undefined) => void;
+    expandable?: boolean;
+}
+export interface FieldBaseProps extends ClassNameProps, PropsWithChildren, FieldBaseParams {
+}
+declare const FieldBase: React.FC<FieldBaseProps>;
+export default FieldBase;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../../utils");
+const b = (0, utils_1.block)('field-base');
+const FieldBase = (props) => {
+    const { className, title, textSize, children, onRefresh, expandable = false } = props;
+    const [showChildren, setShowChildren] = (0, react_1.useState)(!expandable);
+    const titleComponent = react_1.default.useMemo(() => {
+        if (title) {
+            const defaultTitle = (react_1.default.createElement("div", { className: b('title', { size: textSize }) }, lodash_1.default.capitalize(title)));
+            if (expandable) {
+                return (react_1.default.createElement("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren) },
+                    react_1.default.createElement(uikit_1.ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') }),
+                    defaultTitle));
+            }
+            return react_1.default.createElement("div", { className: b('non-foldable') }, defaultTitle);
+        }
+        return null;
+    }, [expandable, showChildren, textSize, title]);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        title && (react_1.default.createElement("div", { className: b('top') },
+            titleComponent,
+            onRefresh && (react_1.default.createElement(uikit_1.Button, { className: b('button'), onClick: () => onRefresh(undefined), view: 'flat', size: 'xs' },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 14 }))))),
+        (!title || showChildren) && react_1.default.createElement("div", { className: b('children') }, children)));
+};
+exports.default = FieldBase;