@gravity-ui/page-constructor 5.12.0 → 5.14.0

package/build/cjs/editor/containers/{Form/hooks.js → Editor/hooks/useCode.js}

@@ -4,36 +4,26 @@ exports.useCode = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
-const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
-const types_1 = require("../../types");
+const usePreviousValue_1 = tslib_1.__importDefault(require("../../../hooks/usePreviousValue"));
 /**
  * Transorms PageConstructor content in JSON to YAML on code editor mode switching
  *
  * @param {Object} props - props parent from form
  * @returns {string} - updated code
  */
-function useCode({ activeTab, content, codeFullscreeModeOn, }) {
+function useCode({ content, codeFullscreeModeOn, isCodeEditMode }) {
     var _a;
     const [code, setCode] = (0, react_1.useState)('');
-    const prevTab = (0, usePreviousValue_1.default)(activeTab);
     const prevContentLength = (0, usePreviousValue_1.default)((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
     const prevCodeFullscreeModeOn = (0, usePreviousValue_1.default)(codeFullscreeModeOn);
     (0, react_1.useEffect)(() => {
         var _a;
-        const switchedToCodeEditing = activeTab !== prevTab && activeTab === types_1.FormTab.Code;
         const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
         const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
-        if (blocksCountChanged || switchedToCodeEditing || codeModeSwitched) {
+        if (blocksCountChanged || isCodeEditMode || codeModeSwitched) {
             setCode(js_yaml_1.default.dump(content, { lineWidth: -1 }));
         }
-    }, [
-        activeTab,
-        prevTab,
-        content,
-        prevContentLength,
-        codeFullscreeModeOn,
-        prevCodeFullscreeModeOn,
-    ]);
+    }, [isCodeEditMode, content, prevContentLength, codeFullscreeModeOn, prevCodeFullscreeModeOn]);
     return code;
 }
 exports.useCode = useCode;

package/build/cjs/editor/containers/Editor/hooks/useEditorState.d.ts

@@ -0,0 +1,49 @@
+import { EditModeItem, EditorProps, ViewModeItem } from '../../../types';
+export declare const useEditorState: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => {
+    context: {
+        constructorProps: {
+            content: import("../../../../models").PageContent;
+            custom: import("../../../../models").CustomConfig | undefined;
+        };
+        providerProps: {
+            isMobile: boolean;
+            theme: import("../../../../models").Theme;
+            locale?: import("../../../../context/localeContext").LocaleContextProps | undefined;
+            location?: import("../../../../context/locationContext").LocationContextProps | undefined;
+            ssrConfig?: import("../../../../context/ssrContext").SSRContextProps | undefined;
+            mapsContext?: import("../../../../context/mapsContext/mapsContext").MapsContextType | undefined;
+            projectSettings?: import("../../../../context/projectSettingsContext").ProjectSettingsContextProps | undefined;
+            analytics?: import("../../../..").AnalyticsContextProps | undefined;
+            forms?: import("../../../../context/formsContext").FormsContextProps | undefined;
+            image?: import("../../../../context/imageContext").ImageContextProps | undefined;
+        };
+        deviceEmulationSettings: import("../../../types").DeviceEmulationSettings | undefined;
+        theme: import("../../../../models").Theme | undefined;
+    };
+    viewMode: ViewModeItem;
+    editMode: EditModeItem;
+    constructorTheme: import("../../../../models").Theme;
+    onThemeUpdate: (newTheme: import("../../../../models").Theme) => void;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onEditModeUpdate: (newEditMode: EditModeItem) => void;
+    isCodeEditMode: boolean;
+    isDesktopViewMode: boolean;
+    content: import("../../../../models").PageContent;
+    schema: import("json-schema").JSONSchema4;
+    onContentUpdate: (newContent: import("../../../../models").PageContent) => void;
+    code: string;
+    codeValidator: import("../../../hooks/useCodeValidator").CodeValidator;
+    codeFullscreeModeOn: boolean;
+    onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn: boolean) => void;
+    activeBlockIndex: number;
+    onSelect: (index: number) => void;
+    isCodeOnlyMode: boolean;
+    errorBoundaryState: number;
+    outgoingProps: {
+        content: import("../../../../models").PageContent;
+        custom: import("../../../../models").CustomConfig | undefined;
+        viewMode: ViewModeItem;
+    };
+    onAdd: (block: import("../../../../models").Block) => void;
+    isFormEditMode: boolean;
+};

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/cjs/models/constructor-items/blocks.d.ts

@@ -302,6 +302,7 @@ export interface ContentBlockProps {
     centered?: boolean;
     theme?: ContentTheme;
     list?: ContentItemProps[];
+    controlPosition?: 'default' | 'bottom';
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -96,14 +96,14 @@ export interface QuoteProps extends Themable, CardBaseProps {
     quoteType?: QuoteType;
     button?: ButtonProps;
 }
-export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
     url?: string;
     urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
 }
-export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme' | 'controlPosition'> {
     url: string;
     urlTitle?: string;
     icon?: ImageProps;
@@ -141,7 +141,7 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
     fullscreen?: boolean;
     icon?: PositionedIcon;
 }
-export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
     image: ImageProps;
     enableImageBorderRadius?: boolean;
     margins?: ImageCardMargins;

package/build/cjs/schema/constants.d.ts

@@ -118,6 +118,10 @@ export declare const cardSchemas: {
                     };
                 };
             } | undefined;
+            controlPosition: {
+                type: string; /** @deprecated */
+                enum: string[];
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/cjs/schema/validators/common.d.ts

@@ -29,6 +29,12 @@ export declare const BaseProps: {
         type: string;
     };
 };
+export declare const CardLayoutProps: {
+    controlPosition: {
+        type: string;
+        enum: string[];
+    };
+};
 export declare const containerSizesObject: {
     type: string;
     additionalProperties: boolean;

package/build/cjs/schema/validators/common.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockHeaderProps = exports.CardBase = exports.BorderProps = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.mediaView = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
+exports.CardBase = exports.BorderProps = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.CardLayoutProps = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.mediaView = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
+exports.BlockHeaderProps = void 0;
 const schema_1 = require("../../components/Image/schema");
 const models_1 = require("../../models");
 const event_1 = require("./event");
@@ -35,6 +36,12 @@ exports.BaseProps = {
         type: 'string',
     },
 };
+exports.CardLayoutProps = {
+    controlPosition: {
+        type: 'string',
+        enum: ['content', 'footer'],
+    },
+};
 exports.containerSizesObject = {
     type: 'object',
     additionalProperties: false,

package/build/cjs/sub-blocks/BackgroundCard/BackgroundCard.css

@@ -26,6 +26,9 @@ unpredictable css rules order in build */
   cursor: default;
   border: none;
 }
+.pc-background-card__content {
+  display: flex;
+}
 .pc-background-card__image {
   position: absolute;
   top: 0;
@@ -37,12 +40,6 @@ unpredictable css rules order in build */
   object-fit: cover;
   object-position: left;
 }
-.pc-background-card__footer {
-  margin-top: 0px;
-}
-.pc-background-card__links, .pc-background-card__buttons {
-  margin-top: 16px;
-}
 
 a.pc-background-card_theme_light {
   background-color: var(--pc-color-base-silver);

package/build/cjs/sub-blocks/BackgroundCard/BackgroundCard.js

@@ -15,12 +15,9 @@ const BackgroundCard = (props) => {
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
     const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
-    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
+    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), contentClassName: b('content'), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         react_1.default.createElement(components_1.CardBase.Content, null,
             react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
-            react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: areControlsInFooter ? undefined : links, buttons: areControlsInFooter ? undefined : buttons, list: list, colSizes: { all: 12, md: 12 } })),
-        areControlsInFooter && (links || buttons) && (react_1.default.createElement(components_1.CardBase.Footer, null,
-            react_1.default.createElement(components_1.Links, { className: b('links'), size: "s", links: links, titleId: titleId }),
-            react_1.default.createElement(components_1.Buttons, { className: b('buttons'), size: "s", buttons: buttons, titleId: titleId })))));
+            react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, list: list, colSizes: { all: 12, md: 12 }, controlPosition: areControlsInFooter ? 'bottom' : 'default' }))));
 };
 exports.default = BackgroundCard;

package/build/cjs/sub-blocks/BackgroundCard/schema.js

@@ -7,12 +7,12 @@ const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
 const event_1 = require("../../schema/validators/event");
 const schema_2 = require("../Content/schema");
-const BackgroundCardContentProps = (0, omit_1.default)(schema_2.ContentBase, ['size']);
+const BackgroundCardContentProps = (0, omit_1.default)(schema_2.ContentBase, ['size', 'controlPosition']);
 exports.BackgroundCard = {
     'background-card': {
         additionalProperties: false,
         required: ['title', 'text'],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), BackgroundCardContentProps), { url: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), common_1.CardLayoutProps), BackgroundCardContentProps), { url: {
                 type: 'string',
             }, urlTitle: {
                 type: 'string',

package/build/cjs/sub-blocks/BasicCard/BasicCard.css

@@ -4,9 +4,9 @@ unpredictable css rules order in build */
   min-height: auto;
 }
 
-.pc-basic-card__footer {
-  margin-top: 0px;
+.pc-basic-card__content {
+  display: flex;
 }
-.pc-basic-card__links, .pc-basic-card__buttons {
-  margin-top: 16px;
+.pc-basic-card__wrapper {
+  flex: auto;
 }