@gravity-ui/page-constructor 5.14.4-alpha.0 → 5.14.4-alpha.2

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

@@ -0,0 +1,83 @@
+"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 utils_1 = require("../../../../../utils");
+const utils_2 = require("../../../../utils");
+const DynamicForm_1 = tslib_1.__importDefault(require("../../DynamicForm"));
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const Text_1 = tslib_1.__importDefault(require("../Text/Text"));
+const ItemButton_1 = tslib_1.__importDefault(require("./ItemButton/ItemButton"));
+const b = (0, utils_1.block)('array-dynamic-field');
+const ArrayDynamicField = (props) => {
+    const { title, values, onUpdate, className, blockConfig } = props;
+    const haveItems = values && Array.isArray(values) && values.length;
+    const onAddItem = (0, react_1.useCallback)(() => {
+        if (blockConfig.arrayType === 'text') {
+            onUpdate('', haveItems ? [...values, ''] : ['']);
+        }
+        else if (blockConfig.arrayType === 'object') {
+            onUpdate('', haveItems ? [...values, {}] : [{}]);
+        }
+    }, [blockConfig.arrayType, haveItems, onUpdate, values]);
+    const onDeleteItem = (0, react_1.useCallback)((index) => {
+        if (Array.isArray(values)) {
+            const newArray = (0, utils_2.removeFromArray)(values, index);
+            onUpdate('', newArray);
+        }
+    }, [onUpdate, values]);
+    const onReorderItem = (0, react_1.useCallback)((index, placement) => {
+        if (Array.isArray(values)) {
+            const newArray = (0, utils_2.swapArrayItems)(values, index, placement === 'up' ? index - 1 : index + 1);
+            onUpdate('', newArray);
+        }
+    }, [onUpdate, values]);
+    const renderInput = (0, react_1.useCallback)((value, index) => {
+        const arrayItemButton = (react_1.default.createElement(ItemButton_1.default, { onRemove: () => onDeleteItem(index), onReorderUp: () => onReorderItem(index, 'up'), onReorderDown: () => onReorderItem(index, 'down'), disableReorderUp: index === 0, disableReorderDown: Boolean(haveItems) && values.length === index + 1 }));
+        switch (blockConfig.arrayType) {
+            case 'text': {
+                return (react_1.default.createElement("div", { className: b('row') },
+                    react_1.default.createElement(Text_1.default, { className: b('row-field'), value: String(value), onUpdate: (updateValue) => onUpdate(`[${index}]`, updateValue), onRefresh: (updatedValue) => onUpdate('', updatedValue) }),
+                    arrayItemButton));
+            }
+            case 'object': {
+                if (!blockConfig.properties) {
+                    return null;
+                }
+                return (react_1.default.createElement(uikit_1.Card, { key: index, className: b('card') },
+                    react_1.default.createElement("div", { className: `${b('row')} ${b('card-head')}` },
+                        react_1.default.createElement("div", { className: b('row-title') },
+                            "#",
+                            index),
+                        arrayItemButton),
+                    react_1.default.createElement(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig.properties, onUpdate: (key, updateValue) => onUpdate(`[${index}].${key}`, updateValue) })));
+            }
+            default: {
+                return null;
+            }
+        }
+    }, [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values]);
+    const renderInputs = (0, react_1.useCallback)(() => {
+        if (haveItems) {
+            const renderItems = values
+                .map(renderInput)
+                .filter(Boolean);
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                renderItems,
+                react_1.default.createElement(uikit_1.Button, { className: b('add-button'), onClick: onAddItem },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus }),
+                    blockConfig.buttonText)));
+        }
+        else {
+            return (react_1.default.createElement("div", { className: b('empty') },
+                react_1.default.createElement(uikit_1.Button, { className: b('add-button'), onClick: onAddItem },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus }),
+                    "Please, add new item")));
+        }
+    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);
+    return (react_1.default.createElement(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true },
+        react_1.default.createElement(uikit_1.Card, { className: b('card') }, renderInputs())));
+};
+exports.default = ArrayDynamicField;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../../models';
+interface ItemButtonProps extends ClassNameProps {
+    onRemove: () => void;
+    onReorderUp: () => void;
+    disableReorderUp?: boolean;
+    onReorderDown: () => void;
+    disableReorderDown?: boolean;
+}
+declare const ItemButton: React.FC<ItemButtonProps>;
+export default ItemButton;

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

@@ -0,0 +1,28 @@
+"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 utils_1 = require("../../../../../../utils");
+const b = (0, utils_1.block)('array-item-button');
+const ItemButton = (props) => {
+    const { className, onRemove, onReorderUp, onReorderDown, disableReorderUp = false, disableReorderDown = false, } = props;
+    const buttonRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const onMenuItemClickWrapper = (0, react_1.useCallback)((callback) => {
+        return () => {
+            setIsOpen(false);
+            callback();
+        };
+    }, []);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(uikit_1.Button, { className: b(null, className), ref: buttonRef, onClick: () => setIsOpen(true) },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.EllipsisVertical })),
+        react_1.default.createElement(uikit_1.Popup, { placement: 'bottom-end', anchorRef: buttonRef, open: isOpen, onOutsideClick: () => setIsOpen(false) },
+            react_1.default.createElement(uikit_1.Menu, null,
+                react_1.default.createElement(uikit_1.Menu.Item, { theme: 'danger', onClick: onMenuItemClickWrapper(onRemove), iconStart: react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin }) }, "Remove"),
+                react_1.default.createElement(uikit_1.Menu.Item, { disabled: disableReorderUp, onClick: onMenuItemClickWrapper(onReorderUp), iconStart: react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowUp }) }, "Reorder Up"),
+                react_1.default.createElement(uikit_1.Menu.Item, { disabled: disableReorderDown, onClick: onMenuItemClickWrapper(onReorderDown), iconStart: react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowDown }) }, "Reorder Down")))));
+};
+exports.default = ItemButton;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface BooleanProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: boolean | undefined) => void;
+}
+declare const BooleanDynamicField: React.FC<BooleanProps>;
+export default BooleanDynamicField;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('boolean-dynamic-field');
+const BooleanDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    return (react_1.default.createElement(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate },
+        react_1.default.createElement(uikit_1.Switch, { checked: Boolean(value), onUpdate: onUpdate })));
+};
+exports.default = BooleanDynamicField;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface NumberDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: number | undefined) => void;
+}
+declare const NumberDynamicField: React.FC<NumberDynamicFieldProps>;
+export default NumberDynamicField;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('number-dynamic-field');
+const NumberDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    const onUpdateFunc = (updateValue) => {
+        onUpdate(Number(updateValue));
+    };
+    return (react_1.default.createElement(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate },
+        react_1.default.createElement(uikit_1.TextInput, { value: value || '', onUpdate: onUpdateFunc })));
+};
+exports.default = NumberDynamicField;

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

@@ -0,0 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-object-dynamic-field__card {
+  padding: 12px;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ConfigInput } from '../../../../../common/types';
+import { ClassNameProps, PageContent } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface ObjectDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    blockConfig: Array<ConfigInput>;
+}
+declare const ObjectDynamicField: React.FC<ObjectDynamicFieldProps>;
+export default ObjectDynamicField;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const DynamicForm_1 = tslib_1.__importDefault(require("../../DynamicForm"));
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('object-dynamic-field');
+const ObjectDynamicField = (props) => {
+    const { title, value, onUpdate, className, blockConfig } = props;
+    return (react_1.default.createElement(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: (updatedValue) => onUpdate('', updatedValue), expandable: true },
+        react_1.default.createElement(uikit_1.Card, { className: b('card') },
+            react_1.default.createElement(DynamicForm_1.default, { contentConfig: value, blockConfig: blockConfig, onUpdate: onUpdate }))));
+};
+exports.default = ObjectDynamicField;

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

@@ -0,0 +1,8 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-oneof-dynamic-field__card {
+  padding: 12px;
+}
+.pc-oneof-dynamic-field__radio {
+  margin-bottom: 12px;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { OneOfInput } from '../../../../../common/types';
+import { ClassNameProps, PageContent } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+interface OneOfDynamicFieldProps extends ClassNameProps {
+    contentConfig: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    inputConfig: OneOfInput;
+}
+declare const OneOfDynamicField: React.FC<OneOfDynamicFieldProps>;
+export default OneOfDynamicField;

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

@@ -0,0 +1,34 @@
+"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 utils_1 = require("../../../../../utils");
+const DynamicForm_1 = tslib_1.__importDefault(require("../../DynamicForm"));
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('oneof-dynamic-field');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getOneOfContentConfig = (contentConfig, name) => {
+    if (name) {
+        return contentConfig ? contentConfig[name] : {};
+    }
+    return contentConfig;
+};
+const OneOfDynamicField = (props) => {
+    const { contentConfig, onUpdate, className, inputConfig } = props;
+    const defaultValue = inputConfig.options[0].value;
+    const [oneOfMetaValue, setOneOfMetaValue] = (0, react_1.useState)(defaultValue);
+    const oneOfContentConfig = getOneOfContentConfig(contentConfig, inputConfig.name);
+    const oneOfChosenOption = (0, react_1.useMemo)(() => inputConfig.options.find(({ value: foundOneOfValue }) => foundOneOfValue === oneOfMetaValue), [inputConfig.options, oneOfMetaValue]);
+    const onUpdateOneOf = (0, react_1.useCallback)((value) => {
+        setOneOfMetaValue(value);
+    }, []);
+    return (react_1.default.createElement(FieldBase_1.default, { title: inputConfig.title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true },
+        react_1.default.createElement(uikit_1.Card, { className: b('card') },
+            react_1.default.createElement(uikit_1.RadioButton, { className: b('radio'), options: inputConfig.options.map((option) => ({
+                    content: option.title,
+                    value: option.value,
+                })), value: oneOfMetaValue, onUpdate: onUpdateOneOf }),
+            oneOfChosenOption && (react_1.default.createElement(DynamicForm_1.default, { blockConfig: oneOfChosenOption.properties, contentConfig: oneOfContentConfig, onUpdate: onUpdate })))));
+};
+exports.default = OneOfDynamicField;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectMultipleInput, SelectSingleInput } from '../../../../../common/types';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+type SelectInput = SelectSingleInput | SelectMultipleInput;
+interface SelectDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    input: SelectInput;
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+}
+declare const SelectDynamicField: React.FC<SelectDynamicFieldProps>;
+export default SelectDynamicField;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('select-field');
+const SelectDynamicField = (props) => {
+    const { input, value, onUpdate, className } = props;
+    const inputView = input.view || 'radiobutton';
+    return (react_1.default.createElement(FieldBase_1.default, { title: input.title, className: b(null, className), onRefresh: onUpdate },
+        inputView === 'select' && (react_1.default.createElement(uikit_1.Select, { placeholder: 'Value', value: value ? [value] : [], onUpdate: ([selectValue]) => onUpdate(selectValue), options: input.enum })),
+        inputView === 'radiobutton' && (react_1.default.createElement(uikit_1.RadioButton, { options: input.enum, value: value, onUpdate: onUpdate }))));
+};
+exports.default = SelectDynamicField;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface TextDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+}
+declare const TextDynamicField: React.FC<TextDynamicFieldProps>;
+export default TextDynamicField;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('text-dynamic-field');
+const TextDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    return (react_1.default.createElement(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate },
+        react_1.default.createElement(uikit_1.TextInput, { value: value || '', onUpdate: onUpdate })));
+};
+exports.default = TextDynamicField;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../models';
+import { FieldBaseParams } from '../../FieldBase/FieldBase';
+interface TextAreaDynamicFieldProps extends ClassNameProps, FieldBaseParams {
+    value: string;
+    onUpdate: (value: string | undefined) => void;
+}
+declare const TextAreaDynamicField: React.FC<TextAreaDynamicFieldProps>;
+export default TextAreaDynamicField;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase"));
+const b = (0, utils_1.block)('textarea-dynamic-field');
+const TextAreaDynamicField = (props) => {
+    const { title, value, onUpdate, className } = props;
+    return (react_1.default.createElement(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: onUpdate },
+        react_1.default.createElement(uikit_1.TextArea, { minRows: 5, maxRows: 20, value: value || '', onUpdate: onUpdate })));
+};
+exports.default = TextAreaDynamicField;

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

@@ -0,0 +1,3 @@
+import { PageContent } from '../../../models';
+export declare const getFullPath: (path: string, name: string) => string;
+export declare const getContent: (contentConfig: PageContent, path: string) => any;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContent = exports.getFullPath = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const getFullPath = (path, name) => {
+    if (!path && !name) {
+        return '';
+    }
+    if (!path) {
+        return name;
+    }
+    if (!name) {
+        return path;
+    }
+    return path + '.' + name;
+};
+exports.getFullPath = getFullPath;
+const getContent = (contentConfig, path) => {
+    return path ? lodash_1.default.get(contentConfig, path) : contentConfig;
+};
+exports.getContent = getContent;

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

@@ -0,0 +1,22 @@
+/* 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-global-config {
+  padding: 12px;
+}
+.pc-global-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);
+}

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const DynamicForm_1 = tslib_1.__importDefault(require("../DynamicForm/DynamicForm"));
+const b = (0, utils_1.block)('global-config');
+const GlobalConfig = ({ className }) => {
+    const { global, updateField, config } = (0, contentConfig_1.useContentConfigStore)();
+    const onUpdate = (key, value) => {
+        updateField(key, value);
+    };
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { className: b('title') }, "Global Config"),
+        react_1.default.createElement(DynamicForm_1.default, { contentConfig: config, blockConfig: global, onUpdate: onUpdate })));
+};
+exports.default = GlobalConfig;

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

@@ -0,0 +1,53 @@
+/* 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-middle-screen {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pc-middle-screen__topbar {
+  height: 40px;
+}
+.pc-middle-screen__wrapper {
+  height: 100%;
+}
+.pc-middle-screen__canvas {
+  transform-origin: left top;
+  overflow-y: scroll;
+  position: relative;
+}
+.pc-middle-screen__overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-middle-screen__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  border-radius: 10px;
+}
+.pc-middle-screen__loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--g-color-base-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

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

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

@@ -0,0 +1,34 @@
+"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 utils_1 = require("../../../utils");
+const editorContext_1 = require("../../context/editorContext");
+const iframeContext_1 = require("../../context/iframeContext");
+const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay"));
+const TopBar_1 = tslib_1.__importDefault(require("../TopBar/TopBar"));
+const b = (0, utils_1.block)('middle-screen');
+const MiddleScreen = ({ className }) => {
+    const { url, height, zoom, decreaseZoom, increaseZoom, setZoom } = (0, iframeContext_1.useIframeStore)();
+    const { initialized } = (0, editorContext_1.useEditorStore)();
+    const { setIframeElement } = (0, react_1.useContext)(iframeContext_1.IframeContext);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { className: b('topbar') },
+            react_1.default.createElement(TopBar_1.default, { onZoomUpdate: setZoom, zoom: zoom, onDecreaseZoom: decreaseZoom, onIncreaseZoom: increaseZoom })),
+        react_1.default.createElement("div", { className: b('wrapper') },
+            react_1.default.createElement("div", { className: b('canvas', { hidden: !initialized }), style: {
+                    transform: `scale(${zoom}%)`,
+                    height: `${(100 / zoom) * 100}%`,
+                    width: `${(100 / zoom) * 100}%`,
+                } },
+                react_1.default.createElement("iframe", { ref: (element) => {
+                        if (element) {
+                            setIframeElement(element);
+                        }
+                    }, className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0" }),
+                react_1.default.createElement(Overlay_1.default, { className: b('overlay') }),
+                !initialized && (react_1.default.createElement("div", { className: b('loading') },
+                    react_1.default.createElement(uikit_1.Loader, { size: 'l' })))))));
+};
+exports.default = MiddleScreen;

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

@@ -0,0 +1,56 @@
+/* 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-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-overlay__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  box-sizing: border-box;
+  box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+}
+.pc-overlay__line {
+  position: absolute;
+  border: 3px var(--g-color-base-selection) solid;
+}
+.pc-overlay__line_position_top {
+  border-top: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__line_position_bottom {
+  border-bottom: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__line_position_left {
+  border-left: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__line_position_right {
+  border-right: 5px var(--g-color-line-brand) solid;
+}
+.pc-overlay__actions {
+  pointer-events: auto;
+  position: absolute;
+  bottom: -40px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+  border-radius: 20px;
+}
+.pc-overlay__action-button_grip {
+  cursor: grab;
+}

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

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