@gravity-ui/page-constructor 1.15.0-alpha.2 → 1.15.0-alpha.4

package/build/cjs/blocks/Share/Share.js

@@ -4,8 +4,10 @@ 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 locationContext_1 = require("../../context/locationContext");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const hooks_1 = require("src/hooks");
 const Facebook_1 = require("../../icons/Facebook");
 const Twitter_1 = require("../../icons/Twitter");
 const Linkedin_1 = require("../../icons/Linkedin");
@@ -19,15 +21,21 @@ const icons = {
     telegram: Telegram_1.Telegram,
 };
 const b = (0, utils_1.block)('share-block');
-const Share = ({ items, title }) => {
+const Share = ({ items, title, blockName = models_1.BlockType.ShareBlock }) => {
     const { pathname, hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics([], {
+        name: 'default',
+        type: 'button',
+        block: blockName,
+    }), [handleAnalytics, blockName]);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("h5", { className: b('title') }, title || (0, i18n_1.default)('constructor-share')),
         react_1.default.createElement("div", { className: b('items') }, items.map((type) => {
             const url = (0, utils_1.getAbsolutePath)(hostname, pathname);
             const socialUrl = (0, utils_1.getShareLink)(url, type);
             const icon = icons[type];
-            return (react_1.default.createElement(uikit_1.Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }) }, icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            return (react_1.default.createElement(uikit_1.Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 exports.default = Share;

package/build/cjs/blocks/Simple/schema.d.ts

@@ -33,6 +33,9 @@ export declare const SimpleBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
             title: {

package/build/cjs/blocks/Slider/schema.d.ts

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

package/build/cjs/blocks/Table/schema.d.ts

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

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

@@ -1,3 +1,3 @@
 import { TabsBlockProps } from '../../models';
-export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, blockName, }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
+const models_1 = require("../../models");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
 const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
 const FullscreenImage_1 = tslib_1.__importDefault(require("../../components/FullscreenImage/FullscreenImage"));
@@ -15,7 +16,7 @@ const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTab
 const sub_blocks_1 = require("../../sub-blocks");
 const VideoBlock_1 = require("../../components/VideoBlock/VideoBlock");
 const b = (0, utils_1.block)('tabs-block');
-const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', blockName = models_1.BlockType.TabsBlock, }) => {
     var _a;
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
@@ -40,12 +41,12 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
             react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
                     ...(activeTabData.link ? [activeTabData.link] : []),
                     ...(activeTabData.links || []),
-                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
+                ], buttons: activeTabData.buttons, colSizes: { all: 12 }, blockName: blockName }))));
     const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
             all: grid_1.GridColumnOrderClasses.Last,
             md: grid_1.GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
+        react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight, blockName: blockName })))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)));
@@ -53,7 +54,7 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
-                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }), blockName: models_1.BlockType.TabsBlock }))),
         activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
             mediaContent,
             textContent))));

package/build/cjs/blocks/Tabs/schema.d.ts

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

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

@@ -9,5 +9,6 @@ export interface BackLinkProps {
     className?: string;
     shouldHandleBackAction?: boolean;
     onClick?: () => void;
+    blockName?: string;
 }
 export default function BackLink(props: BackLinkProps): JSX.Element;

package/build/cjs/components/BackLink/BackLink.js

@@ -5,10 +5,18 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const icons_1 = require("../../icons");
 const locationContext_1 = require("../../context/locationContext");
+const hooks_1 = require("src/hooks");
+const COMPONENT_NAME = 'backlink';
 function BackLink(props) {
     const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
+    const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, blockName = COMPONENT_NAME, } = props;
     const backActionHandler = (0, react_1.useCallback)(async () => {
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics([], {
+            name: 'default',
+            type: 'button',
+            block: blockName,
+        });
         if (!history) {
             return;
         }
@@ -21,7 +29,7 @@ function BackLink(props) {
         else {
             history.push({ pathname: url });
         }
-    }, [history, onClick, url]);
+    }, [blockName, handleAnalytics, history, onClick, url]);
     return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowSidebar, size: 24 }),
         react_1.default.createElement("span", null, title)));

package/build/cjs/components/BackgroundMedia/BackgroundMedia.js

@@ -7,11 +7,12 @@ const Media_1 = tslib_1.__importDefault(require("../Media/Media"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock/AnimateBlock"));
 const mobileContext_1 = require("../../context/mobileContext");
 const b = (0, utils_1.block)('BackgroundMedia');
+const COMPONENT_NAME = 'backgound-media-component';
 const BackgroundMedia = (_a) => {
     var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = tslib_1.__rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
         react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
-            parallax, video: isMobile ? undefined : video }, props)))));
+            parallax, video: isMobile ? undefined : video }, props), { blockName: COMPONENT_NAME }))));
 };
 exports.default = BackgroundMedia;

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

@@ -3,6 +3,7 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
+    blockName?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -9,20 +9,29 @@ const localeContext_1 = require("../../context/localeContext/localeContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
+const COMPONENT_NAME = 'button';
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)();
     const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__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 = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "blockName"]);
     const defaultImgPosition = 'left';
     const onClick = (0, react_1.useCallback)(() => {
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
+        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/cjs/components/ButtonTabs/ButtonTabs.d.ts

@@ -8,6 +8,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/cjs/components/ButtonTabs/ButtonTabs.js

@@ -4,9 +4,11 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const index_1 = require("../index");
+const hooks_1 = require("src/hooks");
 const b = (0, utils_1.block)('button-tabs');
 const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+    const { className, items, activeTab, onSelectTab, blockName = '' } = props;
+    const handleAnalytics = (0, hooks_1.useAnalytics)();
     const activeTabId = (0, react_1.useMemo)(() => {
         if (activeTab) {
             return activeTab;
@@ -14,10 +16,11 @@ const ButtonTabs = (props) => {
         return items[0].id;
     }, [activeTab, items]);
     const handleClick = (0, react_1.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_1.default.createElement("div", { className: b(null, className) }, items.map((item) => {
         const isActive = item.id === activeTabId;
         return (react_1.default.createElement(index_1.Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));

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

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

package/build/cjs/components/CardBase/CardBase.js

@@ -8,12 +8,13 @@ const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/Ba
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
+const COMPONENT_NAME = 'card-base';
 const b = (0, utils_1.block)('card-base-block');
 const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 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 = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)();
     let header, content, footer, image, headerClass, footerClass;
@@ -48,7 +49,7 @@ 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_1.default.createElement(RouterLink_1.default, { href: url },
         react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName }, cardContent));

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -6,13 +6,18 @@ const utils_1 = require("../../utils");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('header-breadcrumbs');
+const COMPONENT_NAME = 'header-breadcrumbs';
 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 = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.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_1.default.createElement("div", { className: b({ theme }, className) }, items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
         react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));

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

@@ -13,6 +13,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,7 +27,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 = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)();
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
@@ -35,12 +36,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_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,7 +32,7 @@ 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,
         videoClassName,
@@ -42,6 +43,7 @@ const Video = (props) => {
         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;
@@ -111,10 +112,13 @@ exports.ReactPlayerBlock = react_1.default.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) {
@@ -127,9 +131,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         metrika,
         videoMetrika,
         handleAnalytics,
-        analyticsEvents,
         playEvents,
         stopEvents,
+        blockName,
         setProps,
     ]);
     const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
@@ -142,12 +146,15 @@ exports.ReactPlayerBlock = react_1.default.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 = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
         setIsPlaying(false);

package/build/cjs/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/cjs/components/YandexForm/YandexForm.js

@@ -11,9 +11,10 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 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;
@@ -59,7 +60,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();
         }
@@ -69,6 +74,7 @@ const YandexForm = (props) => {
         pixelEvents,
         handleAnalytics,
         analyticsEvents,
+        blockName,
         onSubmit,
         headerHeight,
     ]);

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/hooks/useAnalytics.d.ts

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

package/build/cjs/hooks/useAnalytics.js

@@ -8,11 +8,11 @@ const useAnalytics = () => {
     if (!sendEvents) {
         return undefined;
     }
-    return (e, defaults) => {
+    return (e, defaultEvent) => {
         if (!e) {
             return;
         }
-        sendEvents(e, defaults);
+        sendEvents(e, defaultEvent);
     };
 };
 exports.useAnalytics = useAnalytics;

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

@@ -77,4 +77,5 @@ export type AnalyticsEvent<T = {}> = T & {
     type?: string;
     counters?: AnalyticsCounters;
 };
+export type DefaultEvent = Record<string, string | boolean | number>;
 export {};