@gravity-ui/page-constructor 5.13.0 → 5.14.1

package/build/cjs/editor/containers/Editor/hooks/useEditorState.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorState = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const schema_1 = require("../../../../schema");
+const EditBlock_1 = tslib_1.__importDefault(require("../../../components/EditBlock/EditBlock"));
+const ErrorBoundary_1 = require("../../../components/ErrorBoundary/ErrorBoundary");
+const NotFoundBlock_1 = require("../../../components/NotFoundBlock/NotFoundBlock");
+const useCodeValidator_1 = require("../../../hooks/useCodeValidator");
+const main_1 = require("../../../store/main");
+const settings_1 = require("../../../store/settings");
+const types_1 = require("../../../types");
+const utils_1 = require("../../../utils");
+const useCode_1 = require("./useCode");
+// Editor business logic
+const useEditorState = (_a) => {
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
+    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, main_1.useMainState)(rest);
+    const { viewMode, editMode, onEditModeUpdate, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
+    const isCodeEditMode = editMode === types_1.EditModeItem.Code;
+    const isViewEditMode = editMode === types_1.EditModeItem.View;
+    const isFormEditMode = editMode === types_1.EditModeItem.Form;
+    const isDesktopViewMode = viewMode === types_1.ViewModeItem.Desktop;
+    const isCodeOnlyMode = codeFullscreeModeOn && isCodeEditMode;
+    const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
+    const schema = (0, react_1.useMemo)(() => (0, schema_1.generateDefaultSchema)(customSchema), [customSchema]);
+    const codeValidator = (0, useCodeValidator_1.useCodeValidator)(schema);
+    const outgoingProps = (0, react_1.useMemo)(() => {
+        const custom = isCodeEditMode || isViewEditMode
+            ? rest.custom
+            : (0, utils_1.addCustomDecorator)([
+                (props) => react_1.default.createElement(NotFoundBlock_1.NotFoundBlock, Object.assign({}, props)),
+                (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, injectEditBlockProps(props)))),
+                // need errorBoundaryState flag to reset error on content update
+                (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_1.getBlockId)(props)}-${errorBoundaryState}` }))),
+            ], rest.custom);
+        return {
+            content: transformedContent,
+            custom,
+            viewMode,
+        };
+    }, [
+        injectEditBlockProps,
+        errorBoundaryState,
+        viewMode,
+        transformedContent,
+        rest.custom,
+        isCodeEditMode,
+        isViewEditMode,
+    ]);
+    const context = (0, react_1.useMemo)(() => ({
+        constructorProps: {
+            content: transformedContent,
+            custom: rest.custom,
+        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme: constructorTheme }),
+        deviceEmulationSettings,
+        theme: editorTheme,
+    }), [
+        providerProps,
+        rest.custom,
+        viewMode,
+        transformedContent,
+        deviceEmulationSettings,
+        constructorTheme,
+        editorTheme,
+    ]);
+    (0, react_1.useEffect)(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(content);
+    }, [content, onChange]);
+    const code = (0, useCode_1.useCode)({ isCodeEditMode, content, codeFullscreeModeOn });
+    return {
+        context,
+        viewMode,
+        editMode,
+        constructorTheme,
+        onThemeUpdate,
+        onViewModeUpdate,
+        onEditModeUpdate,
+        isCodeEditMode,
+        isDesktopViewMode,
+        content,
+        schema,
+        onContentUpdate,
+        code,
+        codeValidator,
+        codeFullscreeModeOn,
+        onCodeFullscreeModeOnUpdate,
+        activeBlockIndex,
+        onSelect,
+        isCodeOnlyMode,
+        errorBoundaryState,
+        outgoingProps,
+        onAdd,
+        isFormEditMode,
+    };
+};
+exports.useEditorState = useEditorState;

package/build/cjs/editor/containers/Form/Form.css

@@ -82,16 +82,6 @@ unpredictable css rules order in build */
 .pc-editor-form + .pc-editor-form {
   margin-top: 12px;
 }
-.pc-editor-form__tabs {
-  --g-color-base-brand: var(--pc-color-base-neon);
-  margin-bottom: 20px;
-}
 .pc-editor-form__block-form {
   margin-bottom: 16px;
-}
-.pc-editor-form_code-editor-active {
-  height: calc(100% - var(--pc-editor-code-header-height));
-}
-.pc-editor-form_code-editor-active .pc-editor-form__tabs {
-  margin-bottom: 0;
 }

package/build/cjs/editor/containers/Form/Form.d.ts

@@ -1,18 +1,11 @@
 import React from 'react';
 import { JSONSchema4 } from 'json-schema';
 import { PageContent } from '../../../models';
-import { FormTab } from '../../types';
-import { CodeEditorMessageProps } from '../../utils/validation';
 export interface FormProps {
     content: PageContent;
     schema: JSONSchema4;
     activeBlockIndex: number;
-    activeTab: FormTab;
-    codeFullscreeModeOn: boolean;
-    onActiveTabUpdate: (tab: FormTab) => void;
-    onCodeFullscreeModeOnUpdate: (codeFullscreeModeOn: boolean) => void;
-    codeValidator: (code: string) => CodeEditorMessageProps;
     onChange: (content: PageContent) => void;
     onSelect: (index: number) => void;
 }
-export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }: FormProps) => JSX.Element>;
+export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, schema }: FormProps) => JSX.Element>;

package/build/cjs/editor/containers/Form/Form.js

@@ -6,47 +6,22 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const BlockForm_1 = require("../../components/BlockForm/BlockForm");
-const CodeEditor_1 = require("../../components/CodeEditor/CodeEditor");
-const PagePropsForm_1 = require("../../components/PagePropsForm/PagePropsForm");
 const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
-const types_1 = require("../../types");
-const hooks_1 = require("./hooks");
 const b = (0, utils_1.block)('editor-form');
-const tabsItems = Object.values(types_1.FormTab).map((tab) => ({
-    id: tab,
-    title: tab,
-}));
-exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
-    const _a = content || {}, { blocks } = _a, page = tslib_1.__rest(_a, ["blocks"]);
-    const code = (0, hooks_1.useCode)({ activeTab, content, codeFullscreeModeOn });
+// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be extremely refactor
+exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, schema }) => {
+    const { blocks } = content || {};
     const spec = (0, useFormSpec_1.default)(schema);
-    const { blocks: blocksSpec, page: pageSpec } = spec || {};
-    let form;
-    switch (activeTab) {
-        case types_1.FormTab.Page: {
-            form = (react_1.default.createElement(PagePropsForm_1.PagePropsForm, { spec: pageSpec, data: page, onChange: (data) => {
-                    return onChange(Object.assign(Object.assign({}, content), data));
-                } }));
-            break;
-        }
-        case types_1.FormTab.Blocks: {
-            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form'), key: (0, utils_1.getBlockKey)(blockData, index) },
-                react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
-                        onChange(Object.assign(Object.assign({}, content), { blocks: [
-                                ...blocks.slice(0, index),
-                                data,
-                                ...blocks.slice(index + 1),
-                            ] }));
-                    }, onSelect: () => onSelect(index) }))) : null)));
-            break;
-        }
-        case types_1.FormTab.Code: {
-            form = (react_1.default.createElement(CodeEditor_1.CodeEditor, { code: code, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
-            break;
-        }
-    }
-    return (react_1.default.createElement("div", { className: b({ 'code-editor-active': activeTab === types_1.FormTab.Code }) },
-        react_1.default.createElement(uikit_1.Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: onActiveTabUpdate }),
-        form));
+    const { blocks: blocksSpec } = spec || {};
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Text, { variant: "body-2" }, 'Blocks'),
+        blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form'), key: (0, utils_1.getBlockKey)(blockData, index) },
+            react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+                    onChange(Object.assign(Object.assign({}, content), { blocks: [
+                            ...blocks.slice(0, index),
+                            data,
+                            ...blocks.slice(index + 1),
+                        ] }));
+                }, onSelect: () => onSelect(index) }))) : null)));
 });
 exports.Form.displayName = 'Form';

package/build/cjs/editor/store/main/index.js

@@ -15,7 +15,7 @@ function useMainState({ content: intialContent, custom }) {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: (0, utils_2.addEditorProps)(intialContent),
-        viewMode: types_1.ViewModeItem.Edititng,
+        viewMode: types_1.ViewModeItem.Desktop,
         theme: constants_1.DEFAULT_THEME,
     });
     return (0, react_1.useMemo)(() => {

package/build/cjs/editor/store/settings/index.d.ts

@@ -1,12 +1,12 @@
 import { Theme } from '../../../models';
-import { FormTab, ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 export declare function useSettingsState(): {
-    formTab: FormTab;
     viewMode: ViewModeItem;
+    editMode: EditModeItem;
     theme: Theme;
     codeFullscreeModeOn: boolean;
-    onFormTabUpdate: (newFormTab: FormTab) => void;
     onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onEditModeUpdate: (newEditMode: EditModeItem) => void;
     onThemeUpdate: (newTheme: Theme) => void;
     onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn: boolean) => void;
 };

package/build/cjs/editor/store/settings/index.js

@@ -4,18 +4,18 @@ exports.useSettingsState = void 0;
 const react_1 = require("react");
 const reducer_1 = require("./reducer");
 function useSettingsState() {
-    const [{ formTab, viewMode, theme, codeFullscreeModeOn }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, reducer_1.initialState);
+    const [{ viewMode, editMode, theme, codeFullscreeModeOn }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, reducer_1.initialState);
     return (0, react_1.useMemo)(() => {
         return {
-            formTab,
             viewMode,
+            editMode,
             theme,
             codeFullscreeModeOn,
-            onFormTabUpdate: (newFormTab) => dispatch({ type: reducer_1.UPDATE_FORM_TAB, payload: newFormTab }),
             onViewModeUpdate: (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode }),
+            onEditModeUpdate: (newEditMode) => dispatch({ type: reducer_1.UPDATE_EDIT_MODE, payload: newEditMode }),
             onThemeUpdate: (newTheme) => dispatch({ type: reducer_1.UPDATE_THEME, payload: newTheme }),
             onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn) => dispatch({ type: reducer_1.UPDATE_CODE_FULLSCREEN_MODE_ON, payload: newCodeFullscreeModeOn }),
         };
-    }, [formTab, viewMode, theme, codeFullscreeModeOn]);
+    }, [viewMode, theme, codeFullscreeModeOn, editMode]);
 }
 exports.useSettingsState = useSettingsState;

package/build/cjs/editor/store/settings/reducer.d.ts

@@ -1,19 +1,23 @@
 import { Theme } from '../../../models';
-import { FormTab, ViewModeItem } from '../../types';
-export declare const UPDATE_FORM_TAB = "UPDATE_FORM_TAB";
+import { EditModeItem, ViewModeItem } from '../../types';
 export declare const UPDATE_CODE_FULLSCREEN_MODE_ON = "UPDATE_CODE_FULLSCREEN_MODE_ON";
 export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
+export declare const UPDATE_EDIT_MODE = "UPDATE_EDIT_MODE";
 export declare const UPDATE_THEME = "UPDATE_THEME";
 interface EditorSettingsState {
     theme: Theme;
     viewMode: ViewModeItem;
+    editMode: EditModeItem;
     codeFullscreeModeOn: boolean;
-    formTab: FormTab;
 }
 interface UpdateViewMode {
     type: typeof UPDATE_VIEW_MODE;
     payload: ViewModeItem;
 }
+interface UpdateEditMode {
+    type: typeof UPDATE_EDIT_MODE;
+    payload: EditModeItem;
+}
 interface UpdateTheme {
     type: typeof UPDATE_THEME;
     payload: Theme;
@@ -22,16 +26,12 @@ interface UpdateCodeFullscreenModeOn {
     type: typeof UPDATE_CODE_FULLSCREEN_MODE_ON;
     payload: boolean;
 }
-interface UpdateFormTab {
-    type: typeof UPDATE_FORM_TAB;
-    payload: FormTab;
-}
-export type EditorSettingsAction = UpdateViewMode | UpdateTheme | UpdateCodeFullscreenModeOn | UpdateFormTab;
+export type EditorSettingsAction = UpdateViewMode | UpdateEditMode | UpdateTheme | UpdateCodeFullscreenModeOn;
 export declare const reducer: (state: EditorSettingsState, action: EditorSettingsAction) => EditorSettingsState;
 export declare const initialState: {
     viewMode: ViewModeItem;
+    editMode: EditModeItem;
     theme: Theme;
     codeFullscreeModeOn: boolean;
-    formTab: FormTab;
 };
 export {};

package/build/cjs/editor/store/settings/reducer.js

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialState = exports.reducer = exports.UPDATE_THEME = exports.UPDATE_VIEW_MODE = exports.UPDATE_CODE_FULLSCREEN_MODE_ON = exports.UPDATE_FORM_TAB = void 0;
+exports.initialState = exports.reducer = exports.UPDATE_THEME = exports.UPDATE_EDIT_MODE = exports.UPDATE_VIEW_MODE = exports.UPDATE_CODE_FULLSCREEN_MODE_ON = void 0;
 const constants_1 = require("../../../components/constants");
 const types_1 = require("../../types");
 // actions
-exports.UPDATE_FORM_TAB = 'UPDATE_FORM_TAB';
 exports.UPDATE_CODE_FULLSCREEN_MODE_ON = 'UPDATE_CODE_FULLSCREEN_MODE_ON';
 exports.UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+exports.UPDATE_EDIT_MODE = 'UPDATE_EDIT_MODE';
 exports.UPDATE_THEME = 'UPDATE_THEME';
 // reducer
 const reducer = (state, action) => {
     switch (action.type) {
         case exports.UPDATE_VIEW_MODE:
             return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case exports.UPDATE_EDIT_MODE:
+            return Object.assign(Object.assign({}, state), { editMode: action.payload });
         case exports.UPDATE_THEME:
             return Object.assign(Object.assign({}, state), { theme: action.payload });
         case exports.UPDATE_CODE_FULLSCREEN_MODE_ON:
             return Object.assign(Object.assign({}, state), { codeFullscreeModeOn: action.payload });
-        case exports.UPDATE_FORM_TAB:
-            return Object.assign(Object.assign({}, state), { formTab: action.payload });
         default:
             return state;
     }
 };
 exports.reducer = reducer;
 exports.initialState = {
-    viewMode: types_1.ViewModeItem.Edititng,
+    viewMode: types_1.ViewModeItem.Desktop,
+    editMode: types_1.EditModeItem.Form,
     theme: constants_1.DEFAULT_THEME,
     codeFullscreeModeOn: false,
-    formTab: types_1.FormTab.Blocks,
 };

package/build/cjs/editor/types/index.d.ts

@@ -29,14 +29,13 @@ export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationPro
     isHeader?: boolean;
 }
 export declare enum ViewModeItem {
-    Edititng = "editing",
     Desktop = "desktop",
     Tablet = "tablet",
     Mobile = "mobile"
 }
-export declare enum FormTab {
-    Blocks = "blocks",
-    Page = "page",
+export declare enum EditModeItem {
+    View = "view",
+    Form = "form",
     Code = "code"
 }
 export {};

package/build/cjs/editor/types/index.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormTab = exports.ViewModeItem = void 0;
+exports.EditModeItem = exports.ViewModeItem = void 0;
 var ViewModeItem;
 (function (ViewModeItem) {
-    ViewModeItem["Edititng"] = "editing";
     ViewModeItem["Desktop"] = "desktop";
     ViewModeItem["Tablet"] = "tablet";
     ViewModeItem["Mobile"] = "mobile";
 })(ViewModeItem = exports.ViewModeItem || (exports.ViewModeItem = {}));
-var FormTab;
-(function (FormTab) {
-    FormTab["Blocks"] = "blocks";
-    FormTab["Page"] = "page";
-    FormTab["Code"] = "code";
-})(FormTab = exports.FormTab || (exports.FormTab = {}));
+var EditModeItem;
+(function (EditModeItem) {
+    EditModeItem["View"] = "view";
+    EditModeItem["Form"] = "form";
+    EditModeItem["Code"] = "code";
+})(EditModeItem = exports.EditModeItem || (exports.EditModeItem = {}));

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -56,6 +56,7 @@ unpredictable css rules order in build */
 .pc-QuestionsBlockItem__link.pc-QuestionsBlockItem__link a {
   outline-offset: -2px;
   border-radius: calc(var(--g-focus-border-radius) + 2px);
+  display: inline-block;
 }
 
 .pc-QuestionsBlockItem__text {

package/build/esm/editor/components/AddBlock/AddBlock.css

@@ -2,8 +2,7 @@
 unpredictable css rules order in build */
 .pc-add-block {
   position: absolute;
-  bottom: 32px;
-  left: calc(50% + var(--pc-editor-left-column-width) / 2);
+  left: 50%;
   transform: translateX(-50%);
   z-index: 110;
 }

package/build/esm/editor/components/CodeEditor/CodeEditor.css

@@ -1,7 +1,9 @@
 .pc-code-editor {
-  height: 100%;
+  z-index: 2;
+  height: 60vh;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
 }
 .pc-code-editor_fullscreen {
   position: absolute;

package/build/esm/editor/components/ControlPanel/ControlPanel.css

@@ -14,17 +14,15 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
 }
-.pc-control-panel__radio-button {
-  margin-left: 12px;
-}
 .pc-control-panel__radio-button .g-radio-button__option {
   display: flex;
   align-items: center;
 }
-.pc-control-panel__mode-switch {
+.pc-control-panel__switch-container {
   display: flex;
   align-items: center;
   place-self: center;
+  gap: 12px;
 }
 .pc-control-panel__theme-switch {
   place-self: center end;

package/build/esm/editor/components/ControlPanel/ControlPanel.d.ts

@@ -1,11 +1,13 @@
 import { ClassNameProps, Theme } from '../../../models';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 import './ControlPanel.css';
 export interface ControlPanelProps extends ClassNameProps {
     viewMode?: ViewModeItem;
+    editMode?: EditModeItem;
     onViewModeChange: (viewMode: ViewModeItem) => void;
+    onEditModeChange: (editMode: EditModeItem) => void;
     theme: Theme;
     onThemeChange: (theme: Theme) => void;
 }
-declare const ControlPanel: ({ viewMode, onViewModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
+declare const ControlPanel: ({ viewMode, editMode, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
 export default ControlPanel;

package/build/esm/editor/components/ControlPanel/ControlPanel.js

@@ -1,33 +1,42 @@
 import React from 'react';
-import { Display, Pencil, Smartphone } from '@gravity-ui/icons';
+import { Code, Display, Eye, Smartphone, SquareDashedText } from '@gravity-ui/icons';
 import { RadioButton, Select } from '@gravity-ui/uikit';
 import { Theme, themeNames } from '../../../models';
 import { block } from '../../../utils';
 import { Tablet } from '../../icons/Tablet';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 import { i18n } from './i18n';
 import './ControlPanel.css';
 const ICON_SIZE = 14;
 const b = block('control-panel');
 const ControlPanelViewModeIcons = {
-    [ViewModeItem.Edititng]: Pencil,
     [ViewModeItem.Desktop]: Display,
     [ViewModeItem.Tablet]: Tablet,
     [ViewModeItem.Mobile]: Smartphone,
 };
-const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, className, theme, onThemeChange, }) => {
-    return (React.createElement("div", { className: b(null, className) },
-        React.createElement("div", null),
-        React.createElement("div", { className: b('mode-switch') },
-            React.createElement("span", null, i18n('mode')),
-            React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
-                const Icon = ControlPanelViewModeIcons[item];
-                return (React.createElement(RadioButton.Option, { key: item, value: item },
-                    React.createElement("span", { className: b('icon') },
-                        React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-            }))),
-        React.createElement("div", { className: b('theme-switch') },
-            React.createElement("span", null, i18n('theme')),
-            React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
+const ControlPanelEditModeIcons = {
+    [EditModeItem.View]: Eye,
+    [EditModeItem.Form]: SquareDashedText,
+    [EditModeItem.Code]: Code,
 };
+const ControlPanel = ({ viewMode = ViewModeItem.Desktop, editMode = EditModeItem.Form, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }) => (React.createElement("div", { className: b(null, className) },
+    React.createElement("div", { className: b('switch-container') },
+        React.createElement("span", null, i18n('edit_mode')),
+        React.createElement(RadioButton, { className: b('radio-button'), value: editMode, onUpdate: (value) => onEditModeChange(value) }, Object.values(EditModeItem).map((item) => {
+            const Icon = ControlPanelEditModeIcons[item];
+            return (React.createElement(RadioButton.Option, { key: item, value: item },
+                React.createElement("span", { className: b('icon') },
+                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+        }))),
+    React.createElement("div", { className: b('switch-container') },
+        React.createElement("span", null, i18n('view_mode')),
+        React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
+            const Icon = ControlPanelViewModeIcons[item];
+            return (React.createElement(RadioButton.Option, { key: item, value: item },
+                React.createElement("span", { className: b('icon') },
+                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+        }))),
+    React.createElement("div", { className: b('switch-container') },
+        React.createElement("span", null, i18n('theme')),
+        React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
 export default ControlPanel;

package/build/esm/editor/components/ControlPanel/i18n/en.json

@@ -1,4 +1,5 @@
 {
-  "mode": "Mode",
+  "view_mode": "View mode",
+  "edit_mode": "Edit mode",
   "theme": "Theme"
 }

package/build/esm/editor/components/ControlPanel/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "theme" | "mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "theme" | "view_mode" | "edit_mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/editor/components/ControlPanel/i18n/ru.json

@@ -1,4 +1,5 @@
 {
-  "mode": "Режим",
+  "view_mode": "Режим просмотра",
+  "edit_mode": "Режим редактирования",
   "theme": "Тема"
 }

package/build/esm/editor/components/Layout/Layout.css

@@ -20,11 +20,6 @@ body {
 .pc-editor-layout {
   position: relative;
 }
-.pc-editor-layout__panel {
-  top: 0;
-  position: sticky;
-  z-index: 2;
-}
 .pc-editor-layout__container {
   position: relative;
   display: flex;
@@ -33,14 +28,23 @@ body {
 }
 .pc-editor-layout__left {
   flex: 0 0 auto;
-  padding: 24px 16px;
+  padding: 24px;
   width: var(--pc-editor-left-column-width);
   border-right: var(--pc-editor-divider-width) solid var(--g-color-line-generic);
   overflow-x: auto;
 }
+.pc-editor-layout__left_closed {
+  display: none;
+}
 .pc-editor-layout__right {
+  position: relative;
   width: 100%;
 }
 .pc-editor-layout__right_editing {
   padding-bottom: 200px;
+}
+.pc-editor-layout__arrow-toggle {
+  padding: 12px;
+  cursor: pointer;
+  border-right: 1px solid var(--g-color-line-generic);
 }

package/build/esm/editor/components/Layout/Layout.d.ts

@@ -1,15 +1,12 @@
 import React, { PropsWithChildren } from 'react';
-import { Theme } from '../../../models';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 import './Layout.css';
 export interface LayoutProps {
-    mode: ViewModeItem;
-    onModeChange: (mode: ViewModeItem) => void;
-    theme: Theme;
-    onThemeChange: (theme: Theme) => void;
+    editMode: EditModeItem;
+    viewMode: ViewModeItem;
 }
 declare const Layout: {
-    ({ children, mode, onModeChange, theme, onThemeChange, }: PropsWithChildren<LayoutProps>): JSX.Element;
+    ({ children, editMode, viewMode }: PropsWithChildren<LayoutProps>): JSX.Element;
     Left: React.FC<{
         children?: React.ReactNode;
     }>;

package/build/esm/editor/components/Layout/Layout.js

@@ -1,15 +1,15 @@
 import React, { Children, Fragment } from 'react';
 import { block } from '../../../utils';
-import { ViewModeItem } from '../../types';
-import ControlPanel from '../ControlPanel/ControlPanel';
+import { EditModeItem } from '../../types';
 import DeviceEmulation from '../DeviceEmulation/DeviceEmulation';
 import './Layout.css';
 const b = block('editor-layout');
 const Left = () => null;
 const Right = () => null;
-const Layout = ({ children, mode, onModeChange, theme, onThemeChange, }) => {
+// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be disappeared
+const Layout = ({ children, editMode, viewMode }) => {
     let left, right;
-    const isEditingMode = mode === ViewModeItem.Edititng;
+    const isEditingMode = editMode === EditModeItem.Form;
     function handleChild(child) {
         switch (child === null || child === void 0 ? void 0 : child.type) {
             case Left:
@@ -23,13 +23,11 @@ const Layout = ({ children, mode, onModeChange, theme, onThemeChange, }) => {
     if (React.Children.toArray(children).length) {
         Children.forEach(children, handleChild);
     }
-    return (React.createElement("div", { className: b() },
-        React.createElement(ControlPanel, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel'), theme: theme, onThemeChange: onThemeChange }),
-        React.createElement("div", { className: b('container') },
-            React.createElement(Fragment, null,
-                left && React.createElement("div", { className: b('left') }, left),
-                right && (React.createElement("div", { className: b('right', { editing: isEditingMode }) },
-                    React.createElement(DeviceEmulation, { mode: mode }, right)))))));
+    return (React.createElement("div", { className: b('container') },
+        React.createElement(Fragment, null,
+            left && React.createElement("div", { className: b('left') }, left),
+            right && (React.createElement("div", { className: b('right', { editing: isEditingMode }) },
+                React.createElement(DeviceEmulation, { mode: viewMode }, right))))));
 };
 Layout.Left = Left;
 Layout.Right = Right;