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

package/build/esm/blocks/Header/Header.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
+import { BlockType, } from '../../models';
 import { Button, Media, RouterLink, HTML } from '../../components';
 import { Grid, Row, Col } from '../../grid';
 import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
@@ -10,15 +11,15 @@ import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import './Header.css';
 const b = block('header-block');
-const Background = ({ background, isMobile }) => {
+const Background = ({ background, isMobile, blockName }) => {
     const { url, image, fullWidthMedia, video, color } = background;
     const imageObject = url ? getMediaImage(url) : image;
     const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
-    return (React.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (React.createElement(Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })))));
+    return (React.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (React.createElement(Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject, blockName: blockName })))));
 };
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 export const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, blockName = BlockType.HeaderBlock, } = props;
     const isMobile = useContext(MobileContext);
     const { themeValue: theme } = useContext(ThemeValueContext);
     const hasRightSideImage = Boolean(image || video);
@@ -57,8 +58,8 @@ export const HeaderBlock = (props) => {
                                     React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))),
                                 buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
                                     buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
-                                        React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                        React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button, { blockName: BlockType.HeaderBlock }))))))),
                                 children))),
-                    hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
+                    hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed, blockName: blockName })))))));
 };
 export default HeaderBlock;

package/build/esm/blocks/Header/schema.d.ts

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

package/build/esm/blocks/HeaderSlider/schema.d.ts

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

package/build/esm/blocks/Icons/schema.d.ts

@@ -54,6 +54,9 @@ export declare const IconsProps: {
         resetPaddings: {
             type: string;
         };
+        blockName: {
+            type: string;
+        };
         type: {};
         when: {};
     };
@@ -115,6 +118,9 @@ export declare const IconsBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/esm/blocks/Info/Info.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
+import { BlockType } from '../../models';
 import { Grid, Row, Col } from '../../grid';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import Content from '../../sub-blocks/Content/Content';
@@ -7,7 +8,7 @@ import './Info.css';
 const b = block('info-block');
 const sizes = { md: 6, all: 12 };
 export const InfoBlock = (props) => {
-    const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
+    const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, blockName = BlockType.InfoBlock, } = props;
     const { themeValue: theme } = useContext(ThemeValueContext);
     const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
     const rightLinks = [
@@ -25,8 +26,8 @@ export const InfoBlock = (props) => {
             React.createElement(Grid, null,
                 React.createElement(Row, null,
                     React.createElement(Col, { sizes: sizes, className: b('left') },
-                        React.createElement(Content, Object.assign({ title: title || (leftContent === null || leftContent === void 0 ? void 0 : leftContent.title), text: leftContent === null || leftContent === void 0 ? void 0 : leftContent.text, links: leftContent === null || leftContent === void 0 ? void 0 : leftContent.links, buttons: leftButtons, additionalInfo: leftContent === null || leftContent === void 0 ? void 0 : leftContent.additionalInfo }, commonProps))),
+                        React.createElement(Content, Object.assign({ title: title || (leftContent === null || leftContent === void 0 ? void 0 : leftContent.title), text: leftContent === null || leftContent === void 0 ? void 0 : leftContent.text, links: leftContent === null || leftContent === void 0 ? void 0 : leftContent.links, buttons: leftButtons, additionalInfo: leftContent === null || leftContent === void 0 ? void 0 : leftContent.additionalInfo }, commonProps, { blockName: blockName }))),
                     React.createElement(Col, { sizes: sizes, className: b('right') },
-                        React.createElement(Content, Object.assign({ title: sectionsTitle || (rightContent === null || rightContent === void 0 ? void 0 : rightContent.title), text: rightContent === null || rightContent === void 0 ? void 0 : rightContent.text, links: rightLinks, buttons: rightContent === null || rightContent === void 0 ? void 0 : rightContent.buttons, additionalInfo: rightContent === null || rightContent === void 0 ? void 0 : rightContent.additionalInfo }, commonProps))))))));
+                        React.createElement(Content, Object.assign({ title: sectionsTitle || (rightContent === null || rightContent === void 0 ? void 0 : rightContent.title), text: rightContent === null || rightContent === void 0 ? void 0 : rightContent.text, links: rightLinks, buttons: rightContent === null || rightContent === void 0 ? void 0 : rightContent.buttons, additionalInfo: rightContent === null || rightContent === void 0 ? void 0 : rightContent.additionalInfo }, commonProps, { blockName: blockName }))))))));
 };
 export default InfoBlock;

package/build/esm/blocks/Info/schema.d.ts

@@ -21,6 +21,9 @@ export declare const InfoBlock: {
                 type: string;
                 contentType: string;
             };
+            blockName: {
+                type: string;
+            };
             buttons: {
                 type: string;
                 items: {

package/build/esm/blocks/Info/schema.js

@@ -18,6 +18,8 @@ export const InfoBlock = {
             }), sectionsTitle: {
                 type: 'string',
                 contentType: 'text',
+            }, blockName: {
+                type: 'string',
             }, buttons: filteredArray(ButtonBlock), theme: ThemeProps, links: filteredArray(LinkProps), leftContent: ContentProps, rightContent: ContentProps }),
     },
 };

package/build/esm/blocks/LinkTable/schema.d.ts

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

package/build/esm/blocks/Media/Media.js

@@ -2,6 +2,7 @@ import { __rest } from "tslib";
 import React, { useContext, useMemo, useState } from 'react';
 import { block, getThemedValue } from '../../utils';
 import { Grid, Row, Col, GridColumnSize } from '../../grid';
+import { BlockType } from '../../models';
 import Media from '../../components/Media/Media';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BlockHeader from '../../components/BlockHeader/BlockHeader';
@@ -10,7 +11,7 @@ import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import './Media.css';
 const b = block('media-block');
 export const MediaBlock = (props) => {
-    const { media, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, disableShadow = false } = props, mediaContentProps = __rest(props, ["media", "largeMedia", "direction", "mobileDirection", "animated", "mediaOnly", "disableShadow"]);
+    const { media, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, disableShadow = false, blockName = BlockType.MediaBlock } = props, mediaContentProps = __rest(props, ["media", "largeMedia", "direction", "mobileDirection", "animated", "mediaOnly", "disableShadow", "blockName"]);
     const { title, description } = mediaContentProps;
     const [play, setPlay] = useState(false);
     const { themeValue: theme } = useContext(ThemeValueContext);
@@ -34,6 +35,6 @@ export const MediaBlock = (props) => {
                 React.createElement(Col, { className: b('content'), sizes: contentSizes }, mediaContent),
                 React.createElement(Col, { sizes: mediaSizes },
                     React.createElement("div", { className: b('card', { shadow: !disableShadow }) },
-                        React.createElement(Media, Object.assign({}, mediaThemed, { playVideo: play }))))))));
+                        React.createElement(Media, Object.assign({}, mediaThemed, { playVideo: play, blockName: blockName }))))))));
 };
 export default MediaBlock;

package/build/esm/blocks/Media/MediaContent.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { block } from '../../utils';
+import { BlockType } from '../../models';
 import { Content } from '../../sub-blocks';
 import './MediaContent.css';
 const b = block('media-content');
 const MediaContent = (props) => {
-    const { title, description, button, links, buttons = [], additionalInfo, size = 'l' } = props;
+    const { title, description, button, links, buttons = [], additionalInfo, size = 'l', blockName = BlockType.MediaBlock, } = props;
     const allButtons = button ? [Object.assign(Object.assign({}, button), { size: 'xl' }), ...buttons] : buttons;
     return (React.createElement("div", { className: b() },
-        React.createElement(Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })));
+        React.createElement(Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 }, blockName: blockName })));
 };
 export default MediaContent;

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

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

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

@@ -9,6 +9,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/esm/blocks/Preview/MediaContent/MediaContent.js

@@ -7,8 +7,9 @@ import PreviewMedia from './PreviewMedia';
 import { ThemeValueContext } from '../../../context/theme/ThemeValueContext';
 import './MediaContent.css';
 const b = block('preview-media-content-block');
+const COMPONENT_NAME = 'preview-media-content';
 const MediaContent = 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 } = useContext(ThemeValueContext);
     const [mediaSizes, setMediaSizes] = useState({ [GridColumnSize.All]: 12 });
     const [contentSizes, setContentSizes] = useState({ [GridColumnSize.All]: 12 });
@@ -30,7 +31,7 @@ const MediaContent = forwardRef((props, ref) => {
         const mediaMods = { active: isActiveBlock(id, true) };
         const onClick = () => showMediaContent(id);
         contentComponents.push(React.createElement(PreviewContent, Object.assign({ key: id, id: id }, content, { switching: switching, onClick: onClick, mods: contentMods })));
-        mediaComponents.push(React.createElement(PreviewMedia, { key: id, id: id, media: media && getThemedValue(media, theme), play: isActive, mods: mediaMods }));
+        mediaComponents.push(React.createElement(PreviewMedia, { key: id, id: id, media: media && getThemedValue(media, theme), play: isActive, mods: mediaMods, blockName: blockName }));
     });
     return (React.createElement(Fragment, null,
         React.createElement(Col, { sizes: contentSizes, className: b('content') },

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

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

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

@@ -3,9 +3,10 @@ import { block } from '../../../utils';
 import Media from '../../../components/Media/Media';
 import './PreviewMedia.css';
 const b = 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.createElement("div", { key: id, className: b('media', mods) },
-        React.createElement(Media, Object.assign({}, media, { playVideo: play }))));
+        React.createElement(Media, Object.assign({}, media, { playVideo: play, blockName: blockName }))));
 };
 export default PreviewMedia;

package/build/esm/blocks/Preview/Preview.js

@@ -4,6 +4,7 @@ import { BreakpointContext } from '../../context/breakpointContext';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import MediaContent from './MediaContent/MediaContent';
 import { Row } from '../../grid';
+import { BlockType } from '../../models';
 import { BREAKPOINTS } from '../../constants';
 import { useIntersection } from '../../hooks/useIntersection';
 import './Preview.css';
@@ -19,7 +20,7 @@ const INDENT_BETWEEN_TITLE_DESCRIPTION = 16;
 export 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 = BlockType.PreviewBlock, } = props;
     const breakpoint = useContext(BreakpointContext);
     const isDesktop = breakpoint >= BREAKPOINTS.md;
     const menuRef = React.useRef(null);
@@ -82,7 +83,7 @@ export const PreviewBlock = (props) => {
     }, [changeActiveSlide, activeSlide, autoSwitchTimerId]);
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         React.createElement(Row, { ref: previewRef, className: b('row', { reverse: direction === 'media-content' }) },
-            React.createElement(MediaContent, { ref: menuRef, items: items, title: title, description: description, ratioMediaContent: ratioMediaContent, switching: !stopSwitching, isActiveBlock: isActiveBlock, showMediaContent: showMediaContent }))));
+            React.createElement(MediaContent, { ref: menuRef, items: items, title: title, description: description, ratioMediaContent: ratioMediaContent, switching: !stopSwitching, isActiveBlock: isActiveBlock, showMediaContent: showMediaContent, blockName: blockName }))));
 };
 function changeMenuScroll(element, nextSlide, activeSlide) {
     if (!element) {

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

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

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

@@ -45,6 +45,8 @@ export const PreviewBlock = {
             }, ratioMediaContent: {
                 type: 'string',
                 enum: previewRatioMediaContent,
-            }, items: filteredArray(PreviewItem) }),
+            }, items: filteredArray(PreviewItem), blockName: {
+                type: 'string',
+            } }),
     },
 };

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { block } from '../../utils';
 import { BREAKPOINTS } from '../../constants';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
+import { BlockType } from '../../models';
 import Media from '../../components/Media/Media';
 import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
@@ -15,7 +16,7 @@ const breakpointColumns = {
     [BREAKPOINTS.sm]: 1,
 };
 const PromoFeaturesBlock = (props) => {
-    const { items, title, description, theme, animated = true } = props;
+    const { items, title, description, theme, animated = true, blockName = BlockType.PromoFeaturesBlock, } = props;
     const backgroundTheme = theme || 'default';
     return (React.createElement(AnimateBlock, { className: b({ [backgroundTheme]: true }), animate: animated },
         React.createElement(FullWidthBackground, { className: b('background', { [backgroundTheme]: true }) }),
@@ -31,7 +32,7 @@ const PromoFeaturesBlock = (props) => {
                     React.createElement("h4", { className: b('card-title') }, cardTitle),
                     React.createElement("div", { className: b('card-text') },
                         React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
-                media && React.createElement(Media, Object.assign({ className: b('card-media') }, media))));
+                media && (React.createElement(Media, Object.assign({ className: b('card-media'), blockName: blockName }, media)))));
         }))));
 };
 export default PromoFeaturesBlock;

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

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

package/build/esm/blocks/Questions/Questions.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { block } from '../../utils';
+import { BlockType } from '../../models';
 import Link from '../../components/Link/Link';
 import { YFMWrapper, ToggleArrow, Foldable, HTML } from '../../components';
 import { Row, Col } from '../../grid';
@@ -7,7 +8,7 @@ import { Content } from '../../sub-blocks';
 import './Questions.css';
 const b = block('QuestionsBlock');
 const QuestionsBlock = (props) => {
-    const { title, text, additionalInfo, links, buttons, items } = props;
+    const { title, text, additionalInfo, links, buttons, items, blockName = BlockType.QuestionsBlock, } = props;
     const [opened, setOpened] = useState([0]);
     const toggleItem = (index) => {
         let newState;
@@ -23,7 +24,7 @@ const QuestionsBlock = (props) => {
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },
-                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
+                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, blockName: blockName }))),
             React.createElement(Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
                 return (React.createElement("div", { key: itemTitle, className: b('item') },

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

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

package/build/esm/blocks/Security/Security.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { block } from '../../utils';
+import { BlockType } from '../../models';
 import { FullWidthBackground, HTML, Media, Link, AnimateBlock } from '../../components';
 import { Grid, Row, Col } from '../../grid';
 import './Security.css';
 const b = block('SecurityBlock');
 export const SecurityBlock = (props) => {
-    const { backgroundColor, theme = 'dark', title, points, media, animated } = props;
+    const { backgroundColor, theme = 'dark', title, points, media, animated, blockName = BlockType.SecurityBlock, } = props;
     return (React.createElement(AnimateBlock, { className: b({ theme }), offset: 200, animate: animated },
         React.createElement("div", { className: b('content') },
             React.createElement(FullWidthBackground, { className: b('background'), style: { backgroundColor } }),
@@ -19,6 +20,6 @@ export const SecurityBlock = (props) => {
                     link && (React.createElement(Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (React.createElement(Row, { className: b('media') },
                     React.createElement(Col, null,
-                        React.createElement(Media, Object.assign({ className: b('media') }, media)))))))));
+                        React.createElement(Media, Object.assign({ className: b('media') }, media, { blockName: blockName })))))))));
 };
 export default SecurityBlock;

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

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

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

@@ -23,6 +23,8 @@ export const SecurityBlock = {
                     },
                     link: _.pick(LinkProps, ['text', 'url']),
                 },
-            }) }),
+            }), blockName: {
+                type: 'string',
+            } }),
     },
 };

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

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

package/build/esm/blocks/Share/Share.js

@@ -1,8 +1,10 @@
-import React, { useContext } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { Icon, Button } from '@gravity-ui/uikit';
 import { block, getAbsolutePath, getShareLink } from '../../utils';
+import { BlockType } from '../../models';
 import { LocationContext } from '../../context/locationContext';
 import i18n from './i18n';
+import { useAnalytics } from 'src/hooks';
 import { Facebook } from '../../icons/Facebook';
 import { Twitter } from '../../icons/Twitter';
 import { Linkedin } from '../../icons/Linkedin';
@@ -17,15 +19,21 @@ const icons = {
     telegram: Telegram,
 };
 const b = block('share-block');
-const Share = ({ items, title }) => {
+const Share = ({ items, title, blockName = BlockType.ShareBlock }) => {
     const { pathname, hostname } = useContext(LocationContext);
+    const handleAnalytics = useAnalytics();
+    const handleButtonClick = useCallback(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics([], {
+        name: 'default',
+        type: 'button',
+        block: blockName,
+    }), [handleAnalytics, blockName]);
     return (React.createElement("div", { className: b() },
         React.createElement("h5", { className: b('title') }, title || i18n('constructor-share')),
         React.createElement("div", { className: b('items') }, items.map((type) => {
             const url = getAbsolutePath(hostname, pathname);
             const socialUrl = getShareLink(url, type);
             const icon = icons[type];
-            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }) }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 export default Share;

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
 import { TabsBlockProps } from '../../models';
 import './Tabs.css';
-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/esm/blocks/Tabs/Tabs.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext, useRef, useState } from 'react';
 import { block, getThemedValue } from '../../utils';
 import { Row, Col, GridColumnOrderClasses } from '../../grid';
+import { BlockType } from '../../models';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
@@ -12,7 +13,7 @@ import { Content } from '../../sub-blocks';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
 import './Tabs.css';
 const b = block('tabs-block');
-export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', blockName = BlockType.TabsBlock, }) => {
     var _a;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
@@ -37,12 +38,12 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
             React.createElement(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.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
+        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight, blockName: blockName })))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));
@@ -50,7 +51,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         React.createElement(BlockHeader, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         React.createElement(Row, null,
             React.createElement(Col, { sizes: tabsColSizes },
-                React.createElement(ButtonTabs, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+                React.createElement(ButtonTabs, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }), blockName: BlockType.TabsBlock }))),
         activeTabData && (React.createElement(Row, { className: b('row', { reverse: isReverse }) },
             mediaContent,
             textContent))));

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

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

package/build/esm/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/esm/components/BackLink/BackLink.js

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

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -6,11 +6,12 @@ import AnimateBlock from '../AnimateBlock/AnimateBlock';
 import { MobileContext } from '../../context/mobileContext';
 import './BackgroundMedia.css';
 const b = block('BackgroundMedia');
+const COMPONENT_NAME = 'backgound-media-component';
 const BackgroundMedia = (_a) => {
     var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
     const isMobile = useContext(MobileContext);
     return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
         React.createElement(Media, 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 }))));
 };
 export default BackgroundMedia;

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

@@ -4,6 +4,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;