@gravity-ui/page-constructor 1.15.0-alpha.0 → 1.15.0-alpha.10

package/build/cjs/components/Link/Link.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const icons_1 = require("../../icons");
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
@@ -13,6 +14,7 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('link-block');
 const WORD_JOINER_SYM = '\u200b';
+const COMPONENT_NAME = 'link';
 function getArrowSize(size) {
     switch (size) {
         case 'l':
@@ -26,9 +28,13 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, blockName = COMPONENT_NAME, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'link-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const href = (0, utils_1.setUrlTld)(props.url, tld);
@@ -40,7 +46,7 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick });
+                return (react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick, blockName: blockName }));
             case 'file-link':
             case 'underline':
                 return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));

package/build/cjs/components/Media/Media.js

@@ -9,9 +9,10 @@ const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const b = (0, utils_1.block)('Media');
+const COMPONENT_NAME = 'media-component';
 const Media = (props) => {
     const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
-    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
+    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, blockName = COMPONENT_NAME, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
         let result = [];
@@ -19,7 +20,7 @@ const Media = (props) => {
             result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
         }
         if (video) {
-            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback, blockName: blockName }));
         }
         if (youtube) {
             result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
@@ -45,6 +46,7 @@ const Media = (props) => {
         previewImg,
         playButton,
         customBarControlsClassName,
+        blockName,
         youtubeClassName,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));

package/build/cjs/components/Media/Video/Video.js

@@ -7,8 +7,9 @@ const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPl
 const utils_1 = require("./utils");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('media-component-video');
+const COMPONENT_NAME = 'media-video';
 const Video = (props) => {
-    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, blockName = COMPONENT_NAME, } = props;
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref && ref.current) {
@@ -31,9 +32,10 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height }));
+        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, blockName: blockName }));
     }, [
         video,
+        height,
         videoClassName,
         previewImg,
         playVideo,
@@ -41,7 +43,7 @@ const Video = (props) => {
         customBarControlsClassName,
         metrika,
         analyticsEvents,
-        height,
+        blockName,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -16,11 +16,12 @@ const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
+const COMPONENT_NAME = 'react-player';
 // eslint-disable-next-line react/display-name
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, blockName = COMPONENT_NAME, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -35,7 +36,11 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
-    const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'react-player-controls-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     (0, react_1.useImperativeHandle)(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -84,8 +89,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
-    const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
+    const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [analyticsEvents]);
+    const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [analyticsEvents]);
     const playIcon = (0, react_1.useMemo)(() => {
         let playButtonContent;
         switch (type) {
@@ -111,27 +116,14 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
-            const events = isMuted ? playEvents : stopEvents;
-            if (events) {
-                handleAnalytics(events);
-            }
-        }
+        const events = isMuted ? playEvents : stopEvents;
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(events);
         if (isMuted) {
             setProps({ playingVideoRef: ref.current });
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [
-        playerRef,
-        metrika,
-        videoMetrika,
-        handleAnalytics,
-        analyticsEvents,
-        playEvents,
-        stopEvents,
-        setProps,
-    ]);
+    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
     const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
@@ -142,12 +134,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
-            if (playEvents) {
-                handleAnalytics(playEvents);
-            }
-        }
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(playEvents);
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
         setIsPlaying(false);

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

@@ -1,5 +1,5 @@
 import { PixelEvent } from '../../models';
-import { AnalyticsEventV2 } from '../../models/common';
+import { AnalyticsEvent } from '../../models/common';
 export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
 export interface YandexFormProps {
     id: number | string;
@@ -15,7 +15,8 @@ export interface YandexFormProps {
     onLoad?: () => void;
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
-    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 declare const YandexForm: (props: YandexFormProps) => JSX.Element;
 export default YandexForm;

package/build/cjs/components/YandexForm/YandexForm.js

@@ -8,17 +8,23 @@ const localeContext_1 = require("../../context/localeContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const utils_1 = require("../../utils");
 const useMetrika_1 = require("../../hooks/useMetrika");
-const hooks_1 = require("../..//hooks");
+const common_1 = require("../../models/common");
+const hooks_1 = require("../../hooks");
 exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
+const COMPONENT_NAME = 'yandex-form';
 const b = (0, utils_1.block)('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, blockName = COMPONENT_NAME, } = props;
     const formContainerRef = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'yndex-form-submit',
+        type: common_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const locale = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const updateFormIframe = (0, react_1.useCallback)((container) => {

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

@@ -1,7 +1,7 @@
 export declare const blockMap: {
     "slider-block": (props: import("./models").WithChildren<import("./blocks/Slider/Slider").SliderProps>) => JSX.Element;
     "simple-block": (props: import("./models").WithChildren<import("./models").SimpleBlockProps>) => JSX.Element;
-    "extended-features-block": ({ title, description, items, colSizes, animated, }: import("./models").ExtendedFeaturesProps) => JSX.Element;
+    "extended-features-block": ({ title, description, items, colSizes, animated, blockName, }: import("./models").ExtendedFeaturesProps) => JSX.Element;
     "promo-features-block": (props: import("./models").PromoFeaturesProps) => JSX.Element;
     "questions-block": (props: import("./models").QuestionsProps) => JSX.Element;
     "banner-block": (props: import("./models").BannerBlockProps) => JSX.Element;
@@ -11,14 +11,14 @@ export declare const blockMap: {
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "security-block": (props: import("./models").SecurityBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
-    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, blockName, }: import("./models").TabsBlockProps) => JSX.Element;
     "link-table-block": ({ items, title, description, linkTheme }: import("./models").LinkTableBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
     "card-layout-block": ({ title, description, animated, colSizes, children, }: import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps) => JSX.Element;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
-    "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
+    "share-block": ({ items, title, blockName }: import("./models").ShareBlockProps) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
@@ -31,10 +31,10 @@ export declare const subBlockMap: {
      */
     partner: ({ text, logo, url, border }: import("./models").PartnerProps) => JSX.Element;
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
-    "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
+    "media-card": ({ border, blockName, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
     "news-card": (props: import("./models").NewsCardProps) => JSX.Element;
-    "card-with-image": ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: import("./models").CardWithImageProps) => JSX.Element;
+    "card-with-image": ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, blockName, }: import("./models").CardWithImageProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { AnalyticsEventV2 } from '../../models';
+import { AnalyticsEvent } from '../../models';
 export interface AnalyticsContextProps {
-    sendEvents?: (e: AnalyticsEventV2 | AnalyticsEventV2[]) => void;
+    sendEvents?: (events: AnalyticsEvent[]) => void;
+    sendDefaultEvent?: boolean;
 }
 export declare const AnalyticsContext: React.Context<AnalyticsContextProps>;

package/build/cjs/hooks/useAnalytics.d.ts

@@ -1,2 +1,2 @@
-import { AnalyticsEventV2 } from '../models';
-export declare const useAnalytics: () => ((e?: AnalyticsEventV2 | AnalyticsEventV2[]) => void) | undefined;
+import { AnalyticsEvent } from '../models';
+export declare const useAnalytics: (defaultEvent?: AnalyticsEvent) => ((e?: AnalyticsEvent | AnalyticsEvent[]) => void) | undefined;

package/build/cjs/hooks/useAnalytics.js

@@ -3,16 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAnalytics = void 0;
 const react_1 = require("react");
 const analyticsContext_1 = require("../context/analyticsContext");
-const useAnalytics = () => {
-    const { sendEvents } = (0, react_1.useContext)(analyticsContext_1.AnalyticsContext);
+const useAnalytics = (defaultEvent) => {
+    const { sendEvents, sendDefaultEvent } = (0, react_1.useContext)(analyticsContext_1.AnalyticsContext);
     if (!sendEvents) {
         return undefined;
     }
+    const defaultEvents = defaultEvent && sendDefaultEvent ? [defaultEvent] : [];
     return (e) => {
-        if (!e) {
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
+        }
+        if (!events) {
             return;
         }
-        sendEvents(e);
+        sendEvents(events);
     };
 };
 exports.useAnalytics = useAnalytics;

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

@@ -68,21 +68,19 @@ export type AnalyticsParameter = {
     key: string;
     value: string | number | boolean;
 };
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
 export type AnalyticsCounters = {
     include?: string[];
     exclude?: string[];
 };
-export type AnalyticsEvent = {
-    name: string;
-    type?: string;
-    counters?: AnalyticsCounters;
-    category?: string;
-    label?: string;
-    params?: AnalyticsParameter[];
-};
-export type AnalyticsEventV2<T = {}> = T & {
+export type AnalyticsEvent<T = {}> = T & {
     name: string;
     type?: string;
     counters?: AnalyticsCounters;
+    blockName?: string;
 };
 export {};

package/build/cjs/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PixelEventType = exports.Theme = void 0;
+exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -30,3 +30,9 @@ var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType = exports.PixelEventType || (exports.PixelEventType = {}));
+var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes = exports.PredefinedEventTypes || (exports.PredefinedEventTypes = {}));

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

@@ -109,6 +109,7 @@ export interface HeaderBlockProps {
     verticalOffset?: 's' | 'm' | 'l' | 'xl';
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
+    blockName?: string;
 }
 export type CalculatorProps = Animatable;
 export interface SimpleBlockProps extends Animatable, Childable {
@@ -127,6 +128,7 @@ export interface ExtendedFeaturesProps extends Animatable {
     title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
+    blockName?: string;
 }
 export interface PromoFeaturesItem {
     title: string;
@@ -139,6 +141,7 @@ export interface PromoFeaturesProps extends Animatable {
     title?: TitleProps | string;
     description?: string;
     theme?: 'grey' | 'default';
+    blockName?: string;
 }
 export interface QuestionItem {
     title: string;
@@ -163,6 +166,7 @@ export interface MediaContentProps {
     links?: LinkProps[];
     buttons?: ButtonProps[];
     size?: ContentSize;
+    blockName?: string;
 }
 export interface MediaBlockProps extends Animatable, MediaContentProps {
     media: ThemeSupporting<MediaProps>;
@@ -180,6 +184,7 @@ export interface PreviewBlockProps extends Animatable {
     ratioMediaContent?: PreviewRatioMediaContent;
     stopVideo?: boolean;
     showImmediately?: boolean;
+    blockName?: string;
 }
 export interface InfoBlockProps {
     theme?: TextTheme;
@@ -194,6 +199,7 @@ export interface InfoBlockProps {
     links?: Pick<LinkProps, 'text' | 'url'>[];
     leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
     rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
+    blockName?: string;
 }
 export interface SecurityBlockPoint {
     img: string;
@@ -209,6 +215,7 @@ export interface SecurityBlockProps extends Animatable {
     title: string;
     points?: SecurityBlockPoint[];
     media: MediaProps;
+    blockName?: string;
 }
 export interface TableProps {
     content: string[][];
@@ -235,6 +242,7 @@ export interface TabsBlockProps extends BlockHeaderProps, Animatable {
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
+    blockName?: string;
 }
 export interface LinkTableBlockProps extends BlockHeaderProps {
     items: LinkProps[][];
@@ -264,6 +272,7 @@ export interface ContentLayoutBlockProps {
     };
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
+    blockName?: string;
 }
 export interface ContentBlockProps {
     title?: TitleBaseProps | string;
@@ -275,6 +284,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    blockName?: string;
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",
@@ -286,6 +296,7 @@ export declare enum PCShareSocialNetwork {
 export interface ShareBlockProps {
     items: PCShareSocialNetwork[];
     title?: string;
+    blockName?: string;
 }
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { AnalyticsEventV2, ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEvent, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -110,7 +110,8 @@ export interface MediaVideoProps {
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
-    analyticsEvents?: AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent[];
+    blockName?: string;
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -122,7 +123,8 @@ export interface LinkProps extends Stylable {
     target?: string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface FileLinkProps extends ClassNameProps {
     href: string;
@@ -141,8 +143,9 @@ export interface ButtonProps {
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent[];
     target?: string;
+    blockName?: string;
 }
 export interface ButtonImageProps {
     url: string;
@@ -170,7 +173,8 @@ export interface MediaComponentVideoProps {
     video: MediaVideoProps;
     height?: number;
     metrika?: MetrikaVideo;
-    analyticsEvents?: AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent[];
+    blockName?: string;
     previewImg?: string;
 }
 export interface MediaComponentYoutubeProps {
@@ -226,7 +230,8 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     theme?: TextTheme;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface PreviewContentItemProps {
     title: string;

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 import { ContentBlockProps } from './blocks';
-import { AnalyticsEventV2, PixelEvent } from '../common';
+import { AnalyticsEvent, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -61,7 +61,8 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
-    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;
@@ -77,6 +78,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
     author?: AuthorItem;
     buttonText?: string;
     theme?: TextTheme;
+    blockName?: string;
 }
 export interface NewsCardData {
     id: number;
@@ -111,6 +113,7 @@ export interface BannerCardProps {
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
+    blockName?: string;
 }
 export interface MediaCardProps extends MediaProps, CardBaseProps {
 }
@@ -118,7 +121,7 @@ export interface CardWithImageLinkProps extends Omit<LinkProps, 'text' | 'url'>
     title: string;
     link: string;
 }
-export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme'> {
+export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme' | 'blockName'> {
     image: string;
     description?: string;
     disableCompress?: boolean;

package/build/cjs/navigation/components/NavigationItem/NavigationItem.js

@@ -10,6 +10,7 @@ const icons_1 = require("../../../icons");
 const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
 const utils_2 = require("../../../components/Media/Image/utils");
 const b = (0, utils_1.block)('navigation-item');
+const BLOCK_NAME = 'navigation';
 const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
     icon && typeof icon !== 'string' && react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, icon)),
     react_1.default.createElement("span", { className: b('text') }, text)));
@@ -38,8 +39,8 @@ const NavigationLink = (props) => {
 };
 const NavigationButton = (props) => {
     const { url, target } = props;
-    return target ? (react_1.default.createElement(components_1.Button, Object.assign({}, props, { url: url }))) : (react_1.default.createElement(components_1.RouterLink, { href: url },
-        react_1.default.createElement(components_1.Button, Object.assign({}, props, { url: url }))));
+    return target ? (react_1.default.createElement(components_1.Button, Object.assign({}, props, { url: url, blockName: BLOCK_NAME }))) : (react_1.default.createElement(components_1.RouterLink, { href: url },
+        react_1.default.createElement(components_1.Button, Object.assign({}, props, { url: url, blockName: BLOCK_NAME }))));
 };
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any