@gravity-ui/page-constructor 1.15.0-alpha.3 → 1.15.0-alpha.5

package/build/esm/components/Button/Button.js

@@ -8,20 +8,29 @@ import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import { Github } from '../../icons';
 import './Button.css';
+const COMPONENT_NAME = 'button';
 const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics();
     const { lang, tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, blockName = COMPONENT_NAME } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "blockName"]);
     const defaultImgPosition = 'left';
     const onClick = useCallback(() => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, { type: 'button', block: 'hz' });
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, { name: 'default', type: 'button', block: blockName });
         if (onClickOrigin) {
             onClickOrigin();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    }, [
+        handleMetrika,
+        metrikaGoals,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        blockName,
+        onClickOrigin,
+    ]);
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };

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

@@ -9,6 +9,7 @@ export interface ButtonTabsProps {
     items: ButtonTabsItemProps[];
     activeTab?: string;
     onSelectTab?: (tabId: string) => void;
+    blockName?: string;
 }
 declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
 export default ButtonTabs;

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import { block } from '../../utils';
 import { Button } from '../index';
+import { useAnalytics } from '../../hooks';
 import './ButtonTabs.css';
 const b = block('button-tabs');
 const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+    const { className, items, activeTab, onSelectTab, blockName = '' } = props;
+    const handleAnalytics = useAnalytics();
     const activeTabId = useMemo(() => {
         if (activeTab) {
             return activeTab;
@@ -12,10 +14,11 @@ const ButtonTabs = (props) => {
         return items[0].id;
     }, [activeTab, items]);
     const handleClick = useCallback((tabId) => {
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics([], { name: 'default', type: 'button', block: blockName });
         if (onSelectTab) {
             onSelectTab(tabId);
         }
-    }, [onSelectTab]);
+    }, [blockName, handleAnalytics, onSelectTab]);
     return (React.createElement("div", { className: b(null, className) }, items.map((item) => {
         const isActive = item.id === activeTabId;
         return (React.createElement(Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));

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

@@ -12,6 +12,7 @@ export interface CardBaseProps extends CardBaseParams {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -5,12 +5,13 @@ import RouterLink from '../RouterLink/RouterLink';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import './CardBase.css';
+const COMPONENT_NAME = 'card-base';
 const b = block('card-base-block');
 const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', blockName = COMPONENT_NAME, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics();
     let header, content, footer, image, headerClass, footerClass;
@@ -45,7 +46,7 @@ export const Layout = (props) => {
     const fullClassName = b({ border }, className);
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, { name: 'default', type: 'card', block: blockName });
     };
     return url ? (React.createElement(RouterLink, { href: url },
         React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (React.createElement("div", { className: fullClassName }, cardContent));

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -4,13 +4,18 @@ import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
+const COMPONENT_NAME = 'header-breadcrumbs';
 export default function HeaderBreadcrumbs(props) {
-    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', className } = props;
+    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', blockName = COMPONENT_NAME, className, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics();
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, {
+            name: 'default',
+            type: 'header-breadcrumbs',
+            block: blockName,
+        });
     };
     return (React.createElement("div", { className: b({ theme }, className) }, items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
         React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));

package/build/esm/components/Link/Link.js

@@ -11,6 +11,7 @@ import { useAnalytics } from '../../hooks';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
+const COMPONENT_NAME = 'link';
 function getArrowSize(size) {
     switch (size) {
         case 'l':
@@ -24,7 +25,7 @@ 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 = useMetrika();
     const handleAnalytics = useAnalytics();
     const { hostname } = useContext(LocationContext);
@@ -33,12 +34,12 @@ const LinkBlock = (props) => {
     const defaultTextSize = theme === 'back' ? 'l' : 'm';
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, { name: 'default', type: 'link', block: blockName });
     };
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return React.createElement(BackLink, { title: children || text, url: href, onClick: onClick });
+                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, blockName: blockName }));
             case 'file-link':
             case 'underline':
                 return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));

package/build/esm/components/Media/Media.js

@@ -6,9 +6,10 @@ import Video from './Video/Video';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 import './Media.css';
 const b = block('Media');
+const COMPONENT_NAME = 'media-component';
 export 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] = useState(false);
     const content = useMemo(() => {
         let result = [];
@@ -16,7 +17,7 @@ export const Media = (props) => {
             result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
         }
         if (video) {
-            result.push(React.createElement(Video, { 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.createElement(Video, { 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.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
@@ -42,6 +43,7 @@ export const Media = (props) => {
         previewImg,
         playButton,
         customBarControlsClassName,
+        blockName,
         youtubeClassName,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));

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

@@ -5,8 +5,9 @@ import { getVideoTypesWithPriority } from './utils';
 import { block } from '../../../utils';
 import './Video.css';
 const b = 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 = useRef(null);
     useEffect(() => {
         if (ref && ref.current) {
@@ -29,7 +30,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (React.createElement(ReactPlayerBlock, { 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.createElement(ReactPlayerBlock, { 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,
         videoClassName,
@@ -40,6 +41,7 @@ const Video = (props) => {
         metrika,
         analyticsEvents,
         height,
+        blockName,
     ]);
     const defaultVideoBlock = useMemo(() => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -13,11 +13,12 @@ import { useAnalytics } from '../../hooks';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
+const COMPONENT_NAME = 'react-player';
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, blockName = COMPONENT_NAME, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -108,10 +109,13 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
+        if (handleAnalytics) {
             const events = isMuted ? playEvents : stopEvents;
             if (events) {
-                handleAnalytics(events);
+                handleAnalytics(events, {
+                    type: 'react-player-change-mute',
+                    block: blockName,
+                });
             }
         }
         if (isMuted) {
@@ -124,9 +128,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         metrika,
         videoMetrika,
         handleAnalytics,
-        analyticsEvents,
         playEvents,
         stopEvents,
+        blockName,
         setProps,
     ]);
     const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
@@ -139,12 +143,15 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
+        if (handleAnalytics) {
             if (playEvents) {
-                handleAnalytics(playEvents);
+                handleAnalytics(playEvents, {
+                    type: 'react-player-preview',
+                    block: blockName,
+                });
             }
         }
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents, blockName]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
         setIsPlaying(false);

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

@@ -16,6 +16,7 @@ export interface YandexFormProps {
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 declare const YandexForm: (props: YandexFormProps) => JSX.Element;
 export default YandexForm;

package/build/esm/components/YandexForm/YandexForm.js

@@ -7,9 +7,10 @@ import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../..//hooks';
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
+const COMPONENT_NAME = 'yandex-form';
 const b = block('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, blockName = COMPONENT_NAME, } = props;
     const formContainerRef = useRef(null);
     const iframeRef = useRef();
     const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
@@ -55,7 +56,11 @@ const YandexForm = (props) => {
             window.scrollBy(0, top - headerHeight);
         }
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents, {
+            name: 'default',
+            type: 'yandex-form',
+            block: blockName,
+        });
         if (onSubmit) {
             onSubmit();
         }
@@ -65,6 +70,7 @@ const YandexForm = (props) => {
         pixelEvents,
         handleAnalytics,
         analyticsEvents,
+        blockName,
         onSubmit,
         headerHeight,
     ]);

package/build/esm/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/esm/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/esm/models/constructor-items/common.d.ts

@@ -111,6 +111,7 @@ export interface MediaVideoProps {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
     analyticsEvents?: AnalyticsEvent[];
+    blockName?: string;
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -123,6 +124,7 @@ export interface LinkProps extends Stylable {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface FileLinkProps extends ClassNameProps {
     href: string;
@@ -171,6 +173,7 @@ export interface MediaComponentVideoProps {
     height?: number;
     metrika?: MetrikaVideo;
     analyticsEvents?: AnalyticsEvent[];
+    blockName?: string;
     previewImg?: string;
 }
 export interface MediaComponentYoutubeProps {
@@ -227,6 +230,7 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface PreviewContentItemProps {
     title: string;

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

@@ -62,6 +62,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
     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/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -9,6 +9,7 @@ import SocialIcon from '../SocialIcon/SocialIcon';
 import { getMediaImage } from '../../../components/Media/Image/utils';
 import './NavigationItem.css';
 const b = block('navigation-item');
+const BLOCK_NAME = 'navigation';
 const Content = ({ text, icon }) => (React.createElement(Fragment, null,
     icon && typeof icon !== 'string' && React.createElement(Image, Object.assign({ className: b('icon') }, icon)),
     React.createElement("span", { className: b('text') }, text)));
@@ -37,8 +38,8 @@ const NavigationLink = (props) => {
 };
 const NavigationButton = (props) => {
     const { url, target } = props;
-    return target ? (React.createElement(Button, Object.assign({}, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
-        React.createElement(Button, Object.assign({}, props, { url: url }))));
+    return target ? (React.createElement(Button, Object.assign({}, props, { url: url, blockName: BLOCK_NAME }))) : (React.createElement(RouterLink, { href: url },
+        React.createElement(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

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

@@ -636,6 +636,9 @@ export declare const BlockBaseProps: {
     resetPaddings: {
         type: string;
     };
+    blockName: {
+        type: string;
+    };
     type: {};
     when: {};
 };

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

@@ -386,6 +386,8 @@ export const BlockBaseProps = Object.assign(Object.assign({}, BaseProps), { anch
         enum: containerSizesArray,
     }, resetPaddings: {
         type: 'boolean',
+    }, blockName: {
+        type: 'string',
     } });
 export const TitleProps = {
     type: 'object',

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

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
 import { CardBase, BackgroundImage } from '../../components/';
+import { SubBlockType } from '../../models';
 import Content from '../Content/Content';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, blockName = SubBlockType.BackgroundCard, } = props;
     const { themeValue: theme } = useContext(ThemeValueContext);
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const link = hasBackgroundColor || border === 'line' ? undefined : url;
@@ -14,6 +15,6 @@ const BackgroundCard = (props) => {
     return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: link, border: borderType },
         React.createElement(CardBase.Content, null,
             React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
-            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));
+            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, blockName: blockName }))));
 };
 export default BackgroundCard;

package/build/esm/sub-blocks/BackgroundCard/schema.d.ts

@@ -38,6 +38,9 @@ export declare const BackgroundCard: {
                 type: string;
                 enum: string[];
             };
+            blockName: {
+                type: string;
+            };
             title: {
                 oneOf: ({
                     type: string;

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

@@ -14,6 +14,8 @@ export const BackgroundCard = {
             }, paddingBottom: {
                 type: 'string',
                 enum: ['s', 'm', 'l', 'xl'],
+            }, blockName: {
+                type: 'string',
             } }),
     },
 };

package/build/esm/sub-blocks/BannerCard/BannerCard.js

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
+import { SubBlockType } from '../../models';
 import { Button, YFMWrapper, BackgroundImage, HTML } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
+    const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, blockName = SubBlockType.BannerCard, } = props;
     const { themeValue: theme } = useContext(ThemeValueContext);
     const contentStyle = {};
     if (color) {
@@ -18,7 +19,7 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target })),
+                React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target, blockName: blockName })),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;