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

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

@@ -429,10 +429,7 @@ export declare const MediaBlock: {
                     analyticsEvents: {
                         anyOf: ({
                             type: string;
-                            propertyNames: {
-                                type: string;
-                            };
-                            additionalProperty: {
+                            additionalProperties: {
                                 type: string;
                             };
                             required: string[];
@@ -462,15 +459,15 @@ export declare const MediaBlock: {
                                         };
                                     };
                                 };
+                                blockName: {
+                                    type: string;
+                                };
                             };
                         } | {
                             type: string;
                             items: {
                                 type: string;
-                                propertyNames: {
-                                    type: string;
-                                };
-                                additionalProperty: {
+                                additionalProperties: {
                                     type: string;
                                 };
                                 required: string[];
@@ -500,6 +497,9 @@ export declare const MediaBlock: {
                                             };
                                         };
                                     };
+                                    blockName: {
+                                        type: string;
+                                    };
                                 };
                             };
                         })[];
@@ -603,6 +603,9 @@ export declare const MediaBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Preview/MediaContent/MediaContent.d.ts

@@ -8,6 +8,7 @@ interface MediaContentProps extends Refable<HTMLDivElement> {
     switching: boolean;
     isActiveBlock: (id: number, isMediaBlock?: boolean) => boolean;
     showMediaContent: (id: number) => void;
+    blockName?: string;
 }
-declare const MediaContent: React.ForwardRefExoticComponent<Pick<MediaContentProps, "title" | "items" | "description" | "ratioMediaContent" | "switching" | "isActiveBlock" | "showMediaContent"> & React.RefAttributes<HTMLDivElement>>;
+declare const MediaContent: React.ForwardRefExoticComponent<Pick<MediaContentProps, "title" | "blockName" | "items" | "description" | "ratioMediaContent" | "switching" | "isActiveBlock" | "showMediaContent"> & React.RefAttributes<HTMLDivElement>>;
 export default MediaContent;

package/build/cjs/blocks/Preview/MediaContent/MediaContent.js

@@ -9,8 +9,9 @@ const PreviewContent_1 = tslib_1.__importDefault(require("./PreviewContent"));
 const PreviewMedia_1 = tslib_1.__importDefault(require("./PreviewMedia"));
 const ThemeValueContext_1 = require("../../../context/theme/ThemeValueContext");
 const b = (0, utils_1.block)('preview-media-content-block');
+const COMPONENT_NAME = 'preview-media-content';
 const MediaContent = (0, react_1.forwardRef)((props, ref) => {
-    const { items, title, description = '', switching, ratioMediaContent = '1-1', isActiveBlock, showMediaContent, } = props;
+    const { items, title, description = '', switching, ratioMediaContent = '1-1', isActiveBlock, showMediaContent, blockName = COMPONENT_NAME, } = props;
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const [mediaSizes, setMediaSizes] = (0, react_1.useState)({ [grid_1.GridColumnSize.All]: 12 });
     const [contentSizes, setContentSizes] = (0, react_1.useState)({ [grid_1.GridColumnSize.All]: 12 });
@@ -32,7 +33,7 @@ const MediaContent = (0, react_1.forwardRef)((props, ref) => {
         const mediaMods = { active: isActiveBlock(id, true) };
         const onClick = () => showMediaContent(id);
         contentComponents.push(react_1.default.createElement(PreviewContent_1.default, Object.assign({ key: id, id: id }, content, { switching: switching, onClick: onClick, mods: contentMods })));
-        mediaComponents.push(react_1.default.createElement(PreviewMedia_1.default, { key: id, id: id, media: media && (0, utils_1.getThemedValue)(media, theme), play: isActive, mods: mediaMods }));
+        mediaComponents.push(react_1.default.createElement(PreviewMedia_1.default, { key: id, id: id, media: media && (0, utils_1.getThemedValue)(media, theme), play: isActive, mods: mediaMods, blockName: blockName }));
     });
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(grid_1.Col, { sizes: contentSizes, className: b('content') },

package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.d.ts

@@ -4,6 +4,7 @@ interface PreviewMediaProps {
     media: MediaProps;
     play: boolean;
     mods: Modifiers | null;
+    blockName?: string;
 }
 declare const PreviewMedia: (props: PreviewMediaProps) => JSX.Element;
 export default PreviewMedia;

package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.js

@@ -5,9 +5,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
 const Media_1 = tslib_1.__importDefault(require("../../../components/Media/Media"));
 const b = (0, utils_1.block)('preview-media-block');
+const COMPONENT_NAME = 'preview-media';
 const PreviewMedia = (props) => {
-    const { id, media, play, mods } = props;
+    const { id, media, play, mods, blockName = COMPONENT_NAME } = props;
     return (react_1.default.createElement("div", { key: id, className: b('media', mods) },
-        react_1.default.createElement(Media_1.default, Object.assign({}, media, { playVideo: play }))));
+        react_1.default.createElement(Media_1.default, Object.assign({}, media, { playVideo: play, blockName: blockName }))));
 };
 exports.default = PreviewMedia;

package/build/cjs/blocks/Preview/Preview.js

@@ -8,6 +8,7 @@ const breakpointContext_1 = require("../../context/breakpointContext");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
 const MediaContent_1 = tslib_1.__importDefault(require("./MediaContent/MediaContent"));
 const grid_1 = require("../../grid");
+const models_1 = require("../../models");
 const constants_1 = require("../../constants");
 const useIntersection_1 = require("../../hooks/useIntersection");
 const b = (0, utils_1.block)('preview-block');
@@ -22,7 +23,7 @@ const INDENT_BETWEEN_TITLE_DESCRIPTION = 16;
 const PreviewBlock = (props) => {
     const { direction = 'content-media', animated, items, title, description, ratioMediaContent = '1-1', stopVideo = false, 
     // TODO YDB-server doesn't see previewRef.current and doesn't update the component CLOUDFRONT-9395
-    showImmediately = false, } = props;
+    showImmediately = false, blockName = models_1.BlockType.PreviewBlock, } = props;
     const breakpoint = (0, react_1.useContext)(breakpointContext_1.BreakpointContext);
     const isDesktop = breakpoint >= constants_1.BREAKPOINTS.md;
     const menuRef = react_1.default.useRef(null);
@@ -85,7 +86,7 @@ const PreviewBlock = (props) => {
     }, [changeActiveSlide, activeSlide, autoSwitchTimerId]);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), animate: animated },
         react_1.default.createElement(grid_1.Row, { ref: previewRef, className: b('row', { reverse: direction === 'media-content' }) },
-            react_1.default.createElement(MediaContent_1.default, { ref: menuRef, items: items, title: title, description: description, ratioMediaContent: ratioMediaContent, switching: !stopSwitching, isActiveBlock: isActiveBlock, showMediaContent: showMediaContent }))));
+            react_1.default.createElement(MediaContent_1.default, { ref: menuRef, items: items, title: title, description: description, ratioMediaContent: ratioMediaContent, switching: !stopSwitching, isActiveBlock: isActiveBlock, showMediaContent: showMediaContent, blockName: blockName }))));
 };
 exports.PreviewBlock = PreviewBlock;
 function changeMenuScroll(element, nextSlide, activeSlide) {

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

@@ -30,6 +30,9 @@ export declare const PreviewBlock: {
                     };
                 };
             };
+            blockName: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

package/build/cjs/blocks/Preview/schema.js

@@ -48,6 +48,8 @@ exports.PreviewBlock = {
             }, ratioMediaContent: {
                 type: 'string',
                 enum: previewRatioMediaContent,
-            }, items: (0, utils_1.filteredArray)(PreviewItem) }),
+            }, items: (0, utils_1.filteredArray)(PreviewItem), blockName: {
+                type: 'string',
+            } }),
     },
 };

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const constants_1 = require("../../constants");
 const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper"));
+const models_1 = require("../../models");
 const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"));
 const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
@@ -17,7 +18,7 @@ const breakpointColumns = {
     [constants_1.BREAKPOINTS.sm]: 1,
 };
 const PromoFeaturesBlock = (props) => {
-    const { items, title, description, theme, animated = true } = props;
+    const { items, title, description, theme, animated = true, blockName = models_1.BlockType.PromoFeaturesBlock, } = props;
     const backgroundTheme = theme || 'default';
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b({ [backgroundTheme]: true }), animate: animated },
         react_1.default.createElement(FullWidthBackground_1.default, { className: b('background', { [backgroundTheme]: true }) }),
@@ -33,7 +34,7 @@ const PromoFeaturesBlock = (props) => {
                     react_1.default.createElement("h4", { className: b('card-title') }, cardTitle),
                     react_1.default.createElement("div", { className: b('card-text') },
                         react_1.default.createElement(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }))),
-                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, media))));
+                media && (react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media'), blockName: blockName }, media)))));
         }))));
 };
 exports.default = PromoFeaturesBlock;

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

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

package/build/cjs/blocks/Questions/Questions.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const Link_1 = tslib_1.__importDefault(require("../../components/Link/Link"));
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const b = (0, utils_1.block)('QuestionsBlock');
 const QuestionsBlock = (props) => {
-    const { title, text, additionalInfo, links, buttons, items } = props;
+    const { title, text, additionalInfo, links, buttons, items, blockName = models_1.BlockType.QuestionsBlock, } = props;
     const [opened, setOpened] = (0, react_1.useState)([0]);
     const toggleItem = (index) => {
         let newState;
@@ -25,7 +26,7 @@ const QuestionsBlock = (props) => {
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
                 react_1.default.createElement("div", { className: b('title') },
-                    react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
+                    react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, blockName: blockName }))),
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
                 return (react_1.default.createElement("div", { key: itemTitle, className: b('item') },

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

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

package/build/cjs/blocks/Security/Security.js

@@ -4,11 +4,12 @@ exports.SecurityBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const b = (0, utils_1.block)('SecurityBlock');
 const SecurityBlock = (props) => {
-    const { backgroundColor, theme = 'dark', title, points, media, animated } = props;
+    const { backgroundColor, theme = 'dark', title, points, media, animated, blockName = models_1.BlockType.SecurityBlock, } = props;
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ theme }), offset: 200, animate: animated },
         react_1.default.createElement("div", { className: b('content') },
             react_1.default.createElement(components_1.FullWidthBackground, { className: b('background'), style: { backgroundColor } }),
@@ -22,7 +23,7 @@ const SecurityBlock = (props) => {
                     link && (react_1.default.createElement(components_1.Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (react_1.default.createElement(grid_1.Row, { className: b('media') },
                     react_1.default.createElement(grid_1.Col, null,
-                        react_1.default.createElement(components_1.Media, Object.assign({ className: b('media') }, media)))))))));
+                        react_1.default.createElement(components_1.Media, Object.assign({ className: b('media') }, media, { blockName: blockName })))))))));
 };
 exports.SecurityBlock = SecurityBlock;
 exports.default = exports.SecurityBlock;

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

@@ -160,6 +160,9 @@ export declare const SecurityBlock: {
                     };
                 };
             };
+            blockName: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

package/build/cjs/blocks/Security/schema.js

@@ -27,6 +27,8 @@ exports.SecurityBlock = {
                     },
                     link: lodash_1.default.pick(common_1.LinkProps, ['text', 'url']),
                 },
-            }) }),
+            }), blockName: {
+                type: 'string',
+            } }),
     },
 };

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

@@ -1,3 +1,3 @@
 import { ShareBlockProps } from '../../models';
-declare const Share: ({ items, title }: ShareBlockProps) => JSX.Element;
+declare const Share: ({ items, title, blockName }: ShareBlockProps) => JSX.Element;
 export default Share;

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("../../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)({
+        name: 'share-button-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
+    const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(), [handleAnalytics]);
     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,19 @@ 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("../../hooks");
+const models_1 = require("../../models");
+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 { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, blockName = COMPONENT_NAME, } = props;
+    const handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'back-link-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const backActionHandler = (0, react_1.useCallback)(async () => {
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics();
         if (!history) {
             return;
         }
@@ -21,7 +30,7 @@ function BackLink(props) {
         else {
             history.push({ pathname: url });
         }
-    }, [history, onClick, url]);
+    }, [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

@@ -4,18 +4,24 @@ 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 utils_2 = require("./utils");
 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 handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'button-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const onClick = (0, react_1.useCallback)(() => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);

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

@@ -3,10 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const index_1 = require("../index");
+const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('button-tabs');
+const COMPONENT_NAME = 'button-tabs';
 const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+    const { className, items, activeTab, onSelectTab, blockName = COMPONENT_NAME } = props;
+    const handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'button-tabs-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const activeTabId = (0, react_1.useMemo)(() => {
         if (activeTab) {
             return activeTab;
@@ -14,10 +22,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();
         if (onSelectTab) {
             onSelectTab(tabId);
         }
-    }, [onSelectTab]);
+    }, [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

@@ -1,6 +1,6 @@
 import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
 import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
-import { AnalyticsEventV2 } from '../../models/common';
+import { AnalyticsEvent } from '../../models/common';
 export interface CardBaseProps extends CardBaseParams {
     className?: string;
     bodyClassName?: string;
@@ -10,7 +10,8 @@ export interface CardBaseProps extends CardBaseParams {
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    blockName?: string;
 }
 export interface CardHeaderBaseProps {
     className?: string;

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

@@ -7,15 +7,21 @@ const utils_1 = require("../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
 const useMetrika_1 = require("../../hooks/useMetrika");
+const common_1 = require("../../models/common");
 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)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'card-base-click',
+        type: common_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {
         switch (child.type) {

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

@@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 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 handleAnalytics = (0, hooks_1.useAnalytics)({
+        name: 'header-breadcrumbs-click',
+        type: models_1.PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);