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

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

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

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

@@ -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';
 import './CardBase.css';
 export interface CardBaseProps extends CardBaseParams {
     className?: string;
@@ -11,7 +11,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/esm/components/CardBase/CardBase.js

@@ -3,16 +3,22 @@ import { block } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
 import { useMetrika } from '../../hooks/useMetrika';
+import { PredefinedEventTypes } from '../../models/common';
 import { useAnalytics } from '../../hooks';
 import './CardBase.css';
+const COMPONENT_NAME = 'card-base';
 const b = block('card-base-block');
 const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', blockName = COMPONENT_NAME, } = props;
     const handleMetrika = useMetrika();
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'card-base-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {
         switch (child.type) {

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

@@ -1,13 +1,19 @@
 import React from 'react';
 import { block } from '../../utils';
+import { PredefinedEventTypes } from '../../models';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
+const COMPONENT_NAME = 'header-breadcrumbs';
 export default function HeaderBreadcrumbs(props) {
-    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', className } = props;
+    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', blockName = COMPONENT_NAME, className, } = props;
     const handleMetrika = useMetrika();
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'header-breadcrumbs-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);

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

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block, getLinkProps, setUrlTld } from '../../utils';
+import { PredefinedEventTypes, } from '../../models';
 import { Chevron } from '../../icons';
 import FileLink from '../FileLink/FileLink';
 import BackLink from '../BackLink/BackLink';
@@ -11,6 +12,7 @@ import { useAnalytics } from '../../hooks';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
+const COMPONENT_NAME = 'link';
 function getArrowSize(size) {
     switch (size) {
         case 'l':
@@ -24,9 +26,13 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, blockName = COMPONENT_NAME, } = props;
     const handleMetrika = useMetrika();
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'link-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     const { hostname } = useContext(LocationContext);
     const { tld } = useContext(LocaleContext);
     const href = setUrlTld(props.url, tld);
@@ -38,7 +44,7 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return React.createElement(BackLink, { title: children || text, url: href, onClick: onClick });
+                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, blockName: blockName }));
             case 'file-link':
             case 'underline':
                 return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));

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

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

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

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

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

@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
-import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, } from '../../models';
+import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, PredefinedEventTypes, } from '../../models';
 import CustomBarControls from './CustomBarControls';
 import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
@@ -13,11 +13,12 @@ import { useAnalytics } from '../../hooks';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
+const COMPONENT_NAME = 'react-player';
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, blockName = COMPONENT_NAME, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -32,7 +33,11 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [started, setStarted] = useState(autoPlay);
     const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
-    const handleAnalytics = useAnalytics();
+    const handleAnalytics = useAnalytics({
+        name: 'react-player-controls-click',
+        type: PredefinedEventTypes.Default,
+        blockName: blockName,
+    });
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -81,8 +86,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
-    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
+    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === PredefinedEventTypes.Play), [analyticsEvents]);
+    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === PredefinedEventTypes.Stop), [analyticsEvents]);
     const playIcon = useMemo(() => {
         let playButtonContent;
         switch (type) {
@@ -108,27 +113,14 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
-            const events = isMuted ? playEvents : stopEvents;
-            if (events) {
-                handleAnalytics(events);
-            }
-        }
+        const events = isMuted ? playEvents : stopEvents;
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(events);
         if (isMuted) {
             setProps({ playingVideoRef: ref.current });
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [
-        playerRef,
-        metrika,
-        videoMetrika,
-        handleAnalytics,
-        analyticsEvents,
-        playEvents,
-        stopEvents,
-        setProps,
-    ]);
+    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
     const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
@@ -139,12 +131,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        if (handleAnalytics && analyticsEvents) {
-            if (playEvents) {
-                handleAnalytics(playEvents);
-            }
-        }
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(playEvents);
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
         setIsPlaying(false);

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

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

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

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

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

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

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

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

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

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

package/build/esm/hooks/useAnalytics.js

@@ -1,14 +1,19 @@
 import { useContext } from 'react';
 import { AnalyticsContext } from '../context/analyticsContext';
-export const useAnalytics = () => {
-    const { sendEvents } = useContext(AnalyticsContext);
+export const useAnalytics = (defaultEvent) => {
+    const { sendEvents, sendDefaultEvent } = useContext(AnalyticsContext);
     if (!sendEvents) {
         return undefined;
     }
+    const defaultEvents = defaultEvent && sendDefaultEvent ? [defaultEvent] : [];
     return (e) => {
-        if (!e) {
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
+        }
+        if (!events) {
             return;
         }
-        sendEvents(e);
+        sendEvents(events);
     };
 };

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

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

package/build/esm/models/common.js

@@ -27,3 +27,9 @@ export var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType || (PixelEventType = {}));
+export var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes || (PredefinedEventTypes = {}));

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

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

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

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