@gravity-ui/page-constructor 2.20.0 → 2.21.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.21.0](https://github.com/gravity-ui/page-constructor/compare/v2.20.1...v2.21.0) (2023-05-29)
+
+
+### Features
+
+* remove metrika goals from pixel events ([#355](https://github.com/gravity-ui/page-constructor/issues/355)) ([1a0ddae](https://github.com/gravity-ui/page-constructor/commit/1a0ddae92e4862665c64652c0da27cee9085d286))
+
+## [2.20.1](https://github.com/gravity-ui/page-constructor/compare/v2.20.0...v2.20.1) (2023-05-29)
+
+
+### Bug Fixes
+
+* editor scroll ([#352](https://github.com/gravity-ui/page-constructor/issues/352)) ([9fbbefe](https://github.com/gravity-ui/page-constructor/commit/9fbbefec311a0017eab7533b0b26bbddf97ff453))
+
 ## [2.20.0](https://github.com/gravity-ui/page-constructor/compare/v2.19.0...v2.20.0) (2023-05-25)
 
 

package/build/cjs/components/BackgroundImage/BackgroundImage.js

@@ -6,8 +6,8 @@ const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide } = props;
-    return (react_1.default.createElement("div", { className: b(null, className), style: style },
+    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
+    return (react_1.default.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
         (src || desktop) && !hide && react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && react_1.default.createElement("div", { className: b('container') }, children)));
 };

package/build/cjs/components/Image/Image.d.ts

@@ -5,6 +5,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
+    qa?: string;
 }
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/build/cjs/components/Image/Image.js

@@ -12,7 +12,7 @@ const checkWebP = (src) => {
 };
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src: imageSrc, alt = (0, i18n_1.default)('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt = (0, i18n_1.default)('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -22,7 +22,7 @@ const Image = (props) => {
         disableCompress ||
         !(0, imageCompress_1.isCompressible)(src) ||
         imgLoadingError;
-    return (react_1.default.createElement("picture", { className: containerClassName },
+    return (react_1.default.createElement("picture", { className: containerClassName, "data-qa": qa },
         mobile && (react_1.default.createElement(react_1.Fragment, null,
             !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
             react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),

package/build/cjs/customization/BlockDecoration.js

@@ -3,14 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockDecoration = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const blockIdContext_1 = require("../context/blockIdContext");
 const innerContext_1 = require("../context/innerContext");
+const utils_1 = require("../utils");
 const BlockDecoration = (props) => {
     var _a, _b;
+    const blockContenxtId = (0, utils_1.getBlockIndexFromId)((0, react_1.useContext)(blockIdContext_1.BlockIdContext));
+    const { headerBlockTypes } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const blockId = props.id || blockContenxtId;
+    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
     const block = react_1.default.createElement(react_1.Fragment, null, props.children);
     const blockDecorators = (_b = (_a = (0, react_1.useContext)(innerContext_1.InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
     if (!blockDecorators) {
         return block;
     }
-    return blockDecorators.reduce((children, decorator) => react_1.default.createElement(react_1.Fragment, null, decorator({ children, id: props.id })), block);
+    return blockDecorators.reduce((children, decorator) => (react_1.default.createElement(react_1.Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
 };
 exports.BlockDecoration = BlockDecoration;

package/build/cjs/editor/Components/EditBlock/EditBlock.css

@@ -6,20 +6,26 @@ unpredictable css rules order in build */
 }
 .pc-edit-block__controls {
   position: absolute;
-  width: calc(100% + 24px);
-  height: calc(100% + 24px);
-  top: -12px;
-  left: -12px;
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
   border-radius: 8px;
   z-index: 100;
 }
+.pc-edit-block__controls_isHeader {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
 .pc-edit-block__controls_active {
   border: 4px solid var(--yc-color-promo-base-neon);
 }
 .pc-edit-block__controls-content {
   display: flex;
   position: absolute;
-  bottom: -36px;
+  bottom: -44px;
   left: 50%;
   transform: translateX(-50%);
 }

package/build/cjs/editor/Components/EditBlock/EditBlock.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { EditBlockProps } from '../../../editor/types';
-declare const _default: React.MemoExoticComponent<({ id, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }: EditBlockProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }: EditBlockProps) => JSX.Element>;
 export default _default;

package/build/cjs/editor/Components/EditBlock/EditBlock.js

@@ -3,33 +3,29 @@ 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 blockIdContext_1 = require("../../../context/blockIdContext");
-const utils_1 = require("../../../editor/utils");
-const utils_2 = require("../../../utils");
-const b = (0, utils_2.block)('edit-block');
-const EditBlock = ({ id, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('edit-block');
+const EditBlock = ({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
     const ref = (0, react_1.useRef)(null);
-    const blockContenxtId = (0, utils_1.getBlockIndexFromId)((0, react_1.useContext)(blockIdContext_1.BlockIdContext));
-    const blockId = id || blockContenxtId;
-    const controlsActive = activeBlockId === blockId;
+    const controlsActive = activeBlockId === id;
     (0, react_1.useEffect)(() => {
         var _a;
         if (controlsActive && ref.current) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     }, [controlsActive]);
     return (react_1.default.createElement("div", { className: b(), onClick: () => {
-            onSelect(blockId);
+            onSelect(id);
         }, ref: ref },
-        react_1.default.createElement("div", { className: b('controls', { active: controlsActive }) }, controlsActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
-            typeof blockId === 'number' && (react_1.default.createElement(react_1.Fragment, null,
-                blockId > 0 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(blockId, blockId - 1) },
+        react_1.default.createElement("div", { className: b('controls', { active: controlsActive, isHeader }) }, controlsActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
+            typeof id === 'number' && (react_1.default.createElement(react_1.Fragment, null,
+                id > 0 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id - 1) },
                     react_1.default.createElement(icons_1.ChevronUp, null))),
-                blockId < orderedBlocksCount - 1 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(blockId, blockId + 1) },
+                id < orderedBlocksCount - 1 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id + 1) },
                     react_1.default.createElement(icons_1.ChevronDown, null))),
-                react_1.default.createElement("div", { className: b('control'), onClick: () => onCopy(blockId) },
+                react_1.default.createElement("div", { className: b('control'), onClick: () => onCopy(id) },
                     react_1.default.createElement(icons_1.Copy, null)))),
-            react_1.default.createElement("div", { className: b('control'), onClick: () => onDelete(blockId) },
+            react_1.default.createElement("div", { className: b('control'), onClick: () => onDelete(id) },
                 react_1.default.createElement(icons_1.TrashBin, null))))),
         children));
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PageConstructorProps } from '../../containers/PageConstructor';
-import { BlockDecorationProps, PageData } from '../../models';
+import { BlockDecoratorProps, PageData } from '../../models';
 export type EditorBlockId = number | string;
 export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
     children: (props: Partial<PageConstructorProps>) => React.ReactNode;
@@ -14,4 +14,4 @@ export interface EditBlockEditorProps {
     onCopy: (index: number) => void;
     onOrderChange: (index: number, newIndex: number) => void;
 }
-export type EditBlockProps = EditBlockEditorProps & BlockDecorationProps;
+export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;

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

@@ -1,9 +1,8 @@
 import { BlockDecorator, CustomConfig } from '../../models';
 export declare const formatBlockName: (name: string) => string;
-export declare const getBlockIndexFromId: (blockId?: string) => number;
 export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
     decorators: {
-        block: ((props: import("../../models").BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+        block: ((props: import("../../models").BlockDecoratorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
     };
     blocks?: import("../../models").CustomItems | undefined;
     subBlocks?: import("../../models").CustomItems | undefined;

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

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addCustomDecorator = exports.getBlockIndexFromId = exports.formatBlockName = void 0;
+exports.addCustomDecorator = exports.formatBlockName = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const formatBlockName = (name) => lodash_1.default.capitalize(name).replace(/(block|-)/g, ' ');
 exports.formatBlockName = formatBlockName;
-const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.at(-1)); };
-exports.getBlockIndexFromId = getBlockIndexFromId;
 const addCustomDecorator = (decorator, custom = {}) => {
     const decorators = custom.decorators || {};
     return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, decorators), { block: [...(decorators.block || []), decorator] }) });

package/build/cjs/hooks/useMetrika.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMetrika = void 0;
 const react_1 = require("react");
 const metrikaContext_1 = require("../context/metrikaContext");
-const models_1 = require("../models");
 const guards_1 = require("../models/guards");
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -29,12 +28,6 @@ const useMetrika = () => {
             else {
                 metrika.reachGoals(metrikaGoals);
             }
-            if (!pixelEvents && pixel) {
-                pixel.trackStandard(models_1.PixelEventType.SubmitApplication, {
-                    content_category: 'custom',
-                    content_ids: Array.isArray(metrikaGoals) ? metrikaGoals : [metrikaGoals],
-                });
-            }
         }
         if (pixel && pixelEvents) {
             if (isButtonPixel(pixelEvents)) {

package/build/cjs/models/constructor-items/common.d.ts

@@ -99,6 +99,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
+    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

package/build/cjs/models/constructor.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, BlockDecorationProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
@@ -42,7 +42,7 @@ export interface CustomConfig {
     headers?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
-        block?: ((props: BlockDecorationProps) => React.ReactElement)[];
+        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
     };
 }
 export {};

package/build/cjs/models/customization.d.ts

@@ -2,4 +2,8 @@ import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
     id?: string;
 }
-export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;
+export interface BlockDecoratorProps extends PropsWithChildren {
+    id: string | number;
+    isHeader?: boolean;
+}
+export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;

package/build/cjs/utils/blocks.d.ts

@@ -11,3 +11,4 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
 export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getBlockIndexFromId: (blockId?: string) => number;

package/build/cjs/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -83,3 +83,5 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };
+exports.getBlockIndexFromId = getBlockIndexFromId;

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -4,8 +4,8 @@ import Image from '../Image/Image';
 import './BackgroundImage.css';
 const b = block('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide } = props;
-    return (React.createElement("div", { className: b(null, className), style: style },
+    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
+    return (React.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
         (src || desktop) && !hide && React.createElement(Image, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && React.createElement("div", { className: b('container') }, children)));
 };

package/build/esm/components/Image/Image.d.ts

@@ -5,6 +5,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
+    qa?: string;
 }
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/build/esm/components/Image/Image.js

@@ -9,7 +9,7 @@ const checkWebP = (src) => {
 };
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -19,7 +19,7 @@ const Image = (props) => {
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
-    return (React.createElement("picture", { className: containerClassName },
+    return (React.createElement("picture", { className: containerClassName, "data-qa": qa },
         mobile && (React.createElement(Fragment, null,
             !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)` })),
             React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)` }))),

package/build/esm/customization/BlockDecoration.js

@@ -1,11 +1,17 @@
 import React, { Fragment, useContext } from 'react';
+import { BlockIdContext } from '../context/blockIdContext';
 import { InnerContext } from '../context/innerContext';
+import { getBlockIndexFromId } from '../utils';
 export const BlockDecoration = (props) => {
     var _a, _b;
+    const blockContenxtId = getBlockIndexFromId(useContext(BlockIdContext));
+    const { headerBlockTypes } = useContext(InnerContext);
+    const blockId = props.id || blockContenxtId;
+    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
     const block = React.createElement(Fragment, null, props.children);
     const blockDecorators = (_b = (_a = useContext(InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
     if (!blockDecorators) {
         return block;
     }
-    return blockDecorators.reduce((children, decorator) => React.createElement(Fragment, null, decorator({ children, id: props.id })), block);
+    return blockDecorators.reduce((children, decorator) => (React.createElement(Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
 };

package/build/esm/editor/Components/EditBlock/EditBlock.css

@@ -6,20 +6,26 @@ unpredictable css rules order in build */
 }
 .pc-edit-block__controls {
   position: absolute;
-  width: calc(100% + 24px);
-  height: calc(100% + 24px);
-  top: -12px;
-  left: -12px;
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
   border-radius: 8px;
   z-index: 100;
 }
+.pc-edit-block__controls_isHeader {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
 .pc-edit-block__controls_active {
   border: 4px solid var(--yc-color-promo-base-neon);
 }
 .pc-edit-block__controls-content {
   display: flex;
   position: absolute;
-  bottom: -36px;
+  bottom: -44px;
   left: 50%;
   transform: translateX(-50%);
 }

package/build/esm/editor/Components/EditBlock/EditBlock.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { EditBlockProps } from '../../../editor/types';
 import './EditBlock.css';
-declare const _default: React.MemoExoticComponent<({ id, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }: EditBlockProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }: EditBlockProps) => JSX.Element>;
 export default _default;

package/build/esm/editor/Components/EditBlock/EditBlock.js

@@ -1,33 +1,29 @@
-import React, { Fragment, useContext, useEffect, useRef } from 'react';
+import React, { Fragment, useEffect, useRef } from 'react';
 import { ChevronDown, ChevronUp, Copy, TrashBin } from '@gravity-ui/icons';
-import { BlockIdContext } from '../../../context/blockIdContext';
-import { getBlockIndexFromId } from '../../../editor/utils';
 import { block } from '../../../utils';
 import './EditBlock.css';
 const b = block('edit-block');
-const EditBlock = ({ id, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
+const EditBlock = ({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
     const ref = useRef(null);
-    const blockContenxtId = getBlockIndexFromId(useContext(BlockIdContext));
-    const blockId = id || blockContenxtId;
-    const controlsActive = activeBlockId === blockId;
+    const controlsActive = activeBlockId === id;
     useEffect(() => {
         var _a;
         if (controlsActive && ref.current) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     }, [controlsActive]);
     return (React.createElement("div", { className: b(), onClick: () => {
-            onSelect(blockId);
+            onSelect(id);
         }, ref: ref },
-        React.createElement("div", { className: b('controls', { active: controlsActive }) }, controlsActive && (React.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
-            typeof blockId === 'number' && (React.createElement(Fragment, null,
-                blockId > 0 && (React.createElement("div", { className: b('control'), onClick: () => onOrderChange(blockId, blockId - 1) },
+        React.createElement("div", { className: b('controls', { active: controlsActive, isHeader }) }, controlsActive && (React.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
+            typeof id === 'number' && (React.createElement(Fragment, null,
+                id > 0 && (React.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id - 1) },
                     React.createElement(ChevronUp, null))),
-                blockId < orderedBlocksCount - 1 && (React.createElement("div", { className: b('control'), onClick: () => onOrderChange(blockId, blockId + 1) },
+                id < orderedBlocksCount - 1 && (React.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id + 1) },
                     React.createElement(ChevronDown, null))),
-                React.createElement("div", { className: b('control'), onClick: () => onCopy(blockId) },
+                React.createElement("div", { className: b('control'), onClick: () => onCopy(id) },
                     React.createElement(Copy, null)))),
-            React.createElement("div", { className: b('control'), onClick: () => onDelete(blockId) },
+            React.createElement("div", { className: b('control'), onClick: () => onDelete(id) },
                 React.createElement(TrashBin, null))))),
         children));
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PageConstructorProps } from '../../containers/PageConstructor';
-import { BlockDecorationProps, PageData } from '../../models';
+import { BlockDecoratorProps, PageData } from '../../models';
 export type EditorBlockId = number | string;
 export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
     children: (props: Partial<PageConstructorProps>) => React.ReactNode;
@@ -14,4 +14,4 @@ export interface EditBlockEditorProps {
     onCopy: (index: number) => void;
     onOrderChange: (index: number, newIndex: number) => void;
 }
-export type EditBlockProps = EditBlockEditorProps & BlockDecorationProps;
+export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;

package/build/esm/editor/utils/index.d.ts

@@ -1,9 +1,8 @@
 import { BlockDecorator, CustomConfig } from '../../models';
 export declare const formatBlockName: (name: string) => string;
-export declare const getBlockIndexFromId: (blockId?: string) => number;
 export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
     decorators: {
-        block: ((props: import("../../models").BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+        block: ((props: import("../../models").BlockDecoratorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
     };
     blocks?: import("../../models").CustomItems | undefined;
     subBlocks?: import("../../models").CustomItems | undefined;

package/build/esm/editor/utils/index.js

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 export const formatBlockName = (name) => _.capitalize(name).replace(/(block|-)/g, ' ');
-export const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.at(-1)); };
 export const addCustomDecorator = (decorator, custom = {}) => {
     const decorators = custom.decorators || {};
     return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, decorators), { block: [...(decorators.block || []), decorator] }) });

package/build/esm/hooks/useMetrika.js

@@ -1,6 +1,5 @@
 import { useContext } from 'react';
 import { MetrikaContext } from '../context/metrikaContext';
-import { PixelEventType } from '../models';
 import { isNewMetrikaFormat } from '../models/guards';
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -26,12 +25,6 @@ export const useMetrika = () => {
             else {
                 metrika.reachGoals(metrikaGoals);
             }
-            if (!pixelEvents && pixel) {
-                pixel.trackStandard(PixelEventType.SubmitApplication, {
-                    content_category: 'custom',
-                    content_ids: Array.isArray(metrikaGoals) ? metrikaGoals : [metrikaGoals],
-                });
-            }
         }
         if (pixel && pixelEvents) {
             if (isButtonPixel(pixelEvents)) {

package/build/esm/models/constructor-items/common.d.ts

@@ -99,6 +99,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
+    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

package/build/esm/models/constructor.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, BlockDecorationProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
@@ -42,7 +42,7 @@ export interface CustomConfig {
     headers?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
-        block?: ((props: BlockDecorationProps) => React.ReactElement)[];
+        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
     };
 }
 export {};

package/build/esm/models/customization.d.ts

@@ -2,4 +2,8 @@ import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
     id?: string;
 }
-export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;
+export interface BlockDecoratorProps extends PropsWithChildren {
+    id: string | number;
+    isHeader?: boolean;
+}
+export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;

package/build/esm/utils/blocks.d.ts

@@ -11,3 +11,4 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
 export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getBlockIndexFromId: (blockId?: string) => number;

package/build/esm/utils/blocks.js

@@ -71,3 +71,4 @@ export const getShareLink = (url, type, title, text) => {
             return undefined;
     }
 };
+export const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/common.d.ts

@@ -99,6 +99,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
+    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

package/server/models/constructor.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, BlockDecorationProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
@@ -42,7 +42,7 @@ export interface CustomConfig {
     headers?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
-        block?: ((props: BlockDecorationProps) => React.ReactElement)[];
+        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
     };
 }
 export {};

package/server/models/customization.d.ts

@@ -2,4 +2,8 @@ import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
     id?: string;
 }
-export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;
+export interface BlockDecoratorProps extends PropsWithChildren {
+    id: string | number;
+    isHeader?: boolean;
+}
+export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;

package/server/utils/blocks.d.ts

@@ -11,3 +11,4 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
 export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getBlockIndexFromId: (blockId?: string) => number;

package/server/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -83,3 +83,5 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };
+exports.getBlockIndexFromId = getBlockIndexFromId;