@gravity-ui/page-constructor 1.19.0 → 1.20.0

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

@@ -4,12 +4,14 @@ 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 icons_1 = require("../../icons");
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const locationContext_1 = require("../../context/locationContext/locationContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
+const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('link-block');
 const WORD_JOINER_SYM = '\u200b';
 function getArrowSize(size) {
@@ -25,14 +27,16 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, 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, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const href = (0, utils_1.setUrlTld)(props.url, tld);
     const defaultTextSize = theme === 'back' ? 'l' : 'm';
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics(analyticsEvents);
     };
     const getLinkByType = () => {
         switch (theme) {

package/build/cjs/components/Media/Media.js

@@ -10,7 +10,7 @@ const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
@@ -19,7 +19,7 @@ const Media = (props) => {
             result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
         }
         if (video) {
-            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
         }
         if (youtube) {
             result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullScreen: fullScreen }));
@@ -40,6 +40,7 @@ const Media = (props) => {
         hasVideoFallback,
         videoClassName,
         metrika,
+        analyticsEvents,
         playVideo,
         previewImg,
         playButton,

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

@@ -8,7 +8,7 @@ const utils_1 = require("./utils");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('media-component-video');
 const Video = (props) => {
-    const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref && ref.current) {
@@ -31,7 +31,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, height: height }));
+        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height }));
     }, [
         video,
         height,
@@ -41,6 +41,7 @@ const Video = (props) => {
         commonPlayButton,
         customBarControlsClassName,
         metrika,
+        analyticsEvents,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -12,6 +12,7 @@ const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls
 const videoContext_1 = require("../../context/videoContext");
 const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
+const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
@@ -19,7 +20,7 @@ const FPS = 60;
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -34,6 +35,13 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
+    const eventsArray = (0, react_1.useMemo)(() => {
+        if (analyticsEvents) {
+            return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
+        }
+        return [];
+    }, [analyticsEvents]);
+    const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ReactPlayerControls);
     (0, react_1.useImperativeHandle)(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -82,6 +90,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
+    const playEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
+    const stopEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = (0, react_1.useMemo)(() => {
         let playButtonContent;
         switch (type) {
@@ -107,12 +117,14 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
+        const events = isMuted ? playEvents : stopEvents;
+        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, setProps, videoMetrika, metrika]);
+    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
     const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
@@ -123,7 +135,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
+        handleAnalytics(playEvents);
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
         setIsPlaying(false);

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

@@ -1,6 +1,7 @@
 import { PixelEvent } from '../../models';
+import { AnalyticsEventsBase } from '../../models/common';
 export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
-export interface YandexFormProps {
+export interface YandexFormProps extends AnalyticsEventsBase {
     id: number | string;
     containerId?: string;
     theme?: string;

package/build/cjs/components/YandexForm/YandexForm.js

@@ -7,16 +7,19 @@ const constants_1 = require("../constants");
 const localeContext_1 = require("../../context/localeContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const utils_1 = require("../../utils");
+const common_1 = require("../../models/common");
 const useMetrika_1 = require("../../hooks/useMetrika");
+const hooks_1 = require("../../hooks");
 exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = (0, utils_1.block)('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
     const formContainerRef = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.YandexFormSubmit);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const locale = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const updateFormIframe = (0, react_1.useCallback)((container) => {
@@ -57,10 +60,19 @@ const YandexForm = (props) => {
             window.scrollBy(0, top - headerHeight);
         }
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics(analyticsEvents);
         if (onSubmit) {
             onSubmit();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, onSubmit, headerHeight]);
+    }, [
+        handleMetrika,
+        metrikaGoals,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        onSubmit,
+        headerHeight,
+    ]);
     const handleMessage = (0, react_1.useCallback)(({ origin, data }) => {
         if (origin !== yaFormOrigin) {
             return;

package/build/cjs/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { MetrikaContextProps } from '../../context/metrikaContext';
+import { AnalyticsContextProps } from '../../context/analyticsContext';
 import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
@@ -15,5 +16,6 @@ export interface PageConstructorProviderProps {
     theme?: ConstructorTheme;
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
+    analytics?: AnalyticsContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -4,6 +4,7 @@ exports.PageConstructorProvider = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const metrikaContext_1 = require("../../context/metrikaContext");
+const analyticsContext_1 = require("../../context/analyticsContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const mapsContext_1 = require("../../context/mapsContext/mapsContext");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
@@ -13,7 +14,7 @@ const locationContext_1 = require("../../context/locationContext");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const constants_1 = require("../../components/constants");
 const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, } = props;
+    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         react_1.default.createElement(ThemeValueContext_1.ThemeValueContext.Provider, { value: { themeValue: theme } }),
@@ -23,6 +24,7 @@ const PageConstructorProvider = (props) => {
         react_1.default.createElement(mobileContext_1.MobileContext.Provider, { value: Boolean(isMobile) }),
         react_1.default.createElement(mapsContext_1.MapsContext.Provider, { value: mapsContext }),
         react_1.default.createElement(metrikaContext_1.MetrikaContext.Provider, { value: metrika }),
+        react_1.default.createElement(analyticsContext_1.AnalyticsContext.Provider, { value: analytics }),
         react_1.default.createElement(ssrContext_1.SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
     ].reduceRight((prev, provider) => react_1.default.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */

package/build/cjs/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -6,18 +6,20 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../utils");
 const innerContext_1 = require("../../../../context/innerContext");
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const ConstructorLoadable_1 = require("../ConstructorLoadable");
 const ConstructorItem_1 = require("../ConstructorItem");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
 const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
     const { blockTypes, loadables, itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
-    const renderer = (item, index) => {
+    const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
         let children;
         let itemElement;
         const key = (0, utils_1.getBlockKey)(item, index);
+        const blockId = parentId ? `${parentId}_${key}` : key;
         if (shouldRenderBlock && !shouldRenderBlock(item, key)) {
             return null;
         }
@@ -31,12 +33,13 @@ const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
         }
         else {
             if ('children' in item && item.children) {
-                children = item.children.map(renderer);
+                children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: key }, children));
+            itemElement = (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId },
+                react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: key }, children)));
         }
         return blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: key, Component: itemElement })) : (itemElement);
     };
-    return react_1.default.createElement(react_1.Fragment, null, items.map(renderer));
+    return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };
 exports.ConstructorBlocks = ConstructorBlocks;

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

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

package/build/cjs/context/analyticsContext/analyticsContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.AnalyticsContext = react_1.default.createContext({});

package/build/cjs/context/analyticsContext/index.d.ts

@@ -0,0 +1 @@
+export * from './analyticsContext';

package/build/cjs/context/analyticsContext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./analyticsContext"), exports);

package/build/cjs/context/blockIdContext/blockIdContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type BlockIdContextProp = string;
+export declare const BlockIdContext: React.Context<string>;

package/build/cjs/context/blockIdContext/blockIdContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockIdContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.BlockIdContext = react_1.default.createContext('');

package/build/cjs/context/blockIdContext/index.d.ts

@@ -0,0 +1 @@
+export * from './blockIdContext';

package/build/cjs/context/blockIdContext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./blockIdContext"), exports);

package/build/cjs/context/metrikaContext/metrikaContext.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Metrika, Pixel } from '../../models';
 export interface MetrikaContextProps {
+    /**
+     * @deprecated Metrika will be deleted
+     */
     metrika?: Metrika;
+    /**
+     * @deprecated Metrika will be deleted
+     */
     pixel?: Pixel;
 }
 export declare const MetrikaContext: React.Context<MetrikaContextProps>;

package/build/cjs/hooks/index.d.ts

@@ -2,4 +2,5 @@ export { default as useFocus } from './useFocus';
 export { default as useWindowBreakpoint } from './useWindowBreakpoint';
 export { useIntersection } from './useIntersection';
 export { default as useMount } from './useMount';
+export * from './useAnalytics';
 export * from './hubspot';

package/build/cjs/hooks/index.js

@@ -10,4 +10,5 @@ var useIntersection_1 = require("./useIntersection");
 Object.defineProperty(exports, "useIntersection", { enumerable: true, get: function () { return useIntersection_1.useIntersection; } });
 var useMount_1 = require("./useMount");
 Object.defineProperty(exports, "useMount", { enumerable: true, get: function () { return tslib_1.__importDefault(useMount_1).default; } });
+tslib_1.__exportStar(require("./useAnalytics"), exports);
 tslib_1.__exportStar(require("./hubspot"), exports);

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

@@ -0,0 +1,2 @@
+import { AnalyticsEvent } from '../models';
+export declare const useAnalytics: (name?: string, target?: string) => ((e?: AnalyticsEvent | AnalyticsEvent[]) => void) & import("lodash").MemoizedFunction;

package/build/cjs/hooks/useAnalytics.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnalytics = void 0;
+const lodash_1 = require("lodash");
+const react_1 = require("react");
+const blockIdContext_1 = require("../context/blockIdContext");
+const analyticsContext_1 = require("../context/analyticsContext");
+const models_1 = require("../models");
+const useAnalytics = (name = '', target) => {
+    const { sendEvents, autoEvents } = (0, react_1.useContext)(analyticsContext_1.AnalyticsContext);
+    const context = (0, react_1.useContext)(blockIdContext_1.BlockIdContext);
+    const defaultEvent = (0, react_1.useMemo)(() => name
+        ? {
+            name,
+            context,
+            type: models_1.PredefinedEventTypes.Default,
+            target: target,
+        }
+        : undefined, [context, name, target]);
+    if (!sendEvents) {
+        return (0, lodash_1.memoize)(() => { });
+    }
+    const defaultEvents = defaultEvent && autoEvents ? [defaultEvent] : [];
+    return (0, lodash_1.memoize)((e) => {
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
+        }
+        if (!events) {
+            return;
+        }
+        sendEvents(events);
+    });
+};
+exports.useAnalytics = useAnalytics;

package/build/cjs/hooks/useMetrika.d.ts

@@ -1,7 +1,13 @@
 import { ButtonPixel, MetrikaGoal, PixelEvent } from '../models';
+/**
+ * @deprecated Metrika will be deleted
+ */
 type UseMetrikaProps = {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
 };
+/**
+ * @deprecated useMetrika will be deleted
+ */
 export declare const useMetrika: () => ({ metrikaGoals, pixelEvents }: UseMetrikaProps) => void;
 export {};

package/build/cjs/hooks/useMetrika.js

@@ -5,12 +5,20 @@ const react_1 = require("react");
 const metrikaContext_1 = require("../context/metrikaContext");
 const models_1 = require("../models");
 const guards_1 = require("../models/guards");
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated Metrika will be deleted, which uses this logic
+ */
 function isButtonPixel(pixelEvents) {
     if (Array.isArray(pixelEvents) && pixelEvents.length && 'name' in pixelEvents) {
         return true;
     }
     return false;
 }
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated useMetrika will be deleted
+ */
 const useMetrika = () => {
     const { metrika, pixel } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
     return ({ metrikaGoals, pixelEvents }) => {

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

@@ -7,12 +7,21 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+/**
+ * @deprecated Pixel will be deleted
+ */
 type PixelCommand = 'track' | 'trackCustom';
+/**
+ * @deprecated Pixel will be deleted
+ */
 export interface PixelEvent {
     command: PixelCommand;
     event: PixelEventType | string;
     data?: Object;
 }
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 export declare enum PixelEventType {
     AddPaymentInfo = "AddPaymentInfo",
     AddToCart = "AddToCart",
@@ -36,11 +45,17 @@ export declare enum PixelEventType {
 export type Modifiers = {
     [name: string]: string | boolean | undefined;
 };
+/**
+ * @deprecated Pixel will be deleted
+ */
 export interface Pixel<TEvent = string> {
     trackStandard: (event: TEvent, data?: Object) => void;
     trackCustom: (event: string, data?: Object) => void;
     track: (trackEvents: string | string[] | PixelEvent[] | PixelEvent) => void;
 }
+/**
+ * @deprecated Metrika will be deleted
+ */
 export interface Metrika {
     reachGoal: (counterName: string, ...args: any) => void;
     reachGoals: (goals: MetrikaGoal, counterName?: string) => void;
@@ -49,4 +64,34 @@ export interface ClassNameProps {
     className?: string;
 }
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
+export declare enum DefaultEventNames {
+    ShareButton = "share-button-click",
+    Button = "button-click",
+    CardBase = "card-base-click",
+    Link = "link-click",
+    ReactPlayerControls = "react-player-controls-click",
+    YandexFormSubmit = "yandex-form-submit",
+    HubspotFormSubmit = "hubspot-form-submit",
+    QuoteButton = "quote-button-click",
+    BackLink = "back-link-click"
+}
+export type AnalyticsCounters = {
+    include?: string[];
+    exclude?: string[];
+};
+export type AnalyticsEvent<T = {}> = T & {
+    name: string;
+    type?: string;
+    counters?: AnalyticsCounters;
+    context?: string;
+    target?: string;
+};
+export interface AnalyticsEventsBase {
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+}
 export {};

package/build/cjs/models/common.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PixelEventType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme = exports.Theme || (exports.Theme = {}));
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 var PixelEventType;
 (function (PixelEventType) {
     PixelEventType["AddPaymentInfo"] = "AddPaymentInfo";
@@ -27,3 +30,21 @@ var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType = exports.PixelEventType || (exports.PixelEventType = {}));
+var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes = exports.PredefinedEventTypes || (exports.PredefinedEventTypes = {}));
+var DefaultEventNames;
+(function (DefaultEventNames) {
+    DefaultEventNames["ShareButton"] = "share-button-click";
+    DefaultEventNames["Button"] = "button-click";
+    DefaultEventNames["CardBase"] = "card-base-click";
+    DefaultEventNames["Link"] = "link-click";
+    DefaultEventNames["ReactPlayerControls"] = "react-player-controls-click";
+    DefaultEventNames["YandexFormSubmit"] = "yandex-form-submit";
+    DefaultEventNames["HubspotFormSubmit"] = "hubspot-form-submit";
+    DefaultEventNames["QuoteButton"] = "quote-button-click";
+    DefaultEventNames["BackLink"] = "back-link-click";
+})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));

package/build/cjs/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 { ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -100,7 +100,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     imageClassName?: string;
     hide?: boolean;
 }
-export interface MediaVideoProps {
+export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
     type?: MediaVideoType;
     loop?: LoopProps | boolean;
@@ -111,7 +111,7 @@ export interface MediaVideoProps {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
-export interface LinkProps extends Stylable {
+export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
     text?: string;
     textSize?: TextSize;
@@ -130,7 +130,7 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
-export interface ButtonProps {
+export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
@@ -163,7 +163,7 @@ export interface MediaVideoProps {
     metrika?: MetrikaVideo;
 }
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
-export interface MediaComponentVideoProps {
+export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
     metrika?: MetrikaVideo;

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 import { ContentBlockProps } from './blocks';
-import { PixelEvent } from '../common';
+import { AnalyticsEventsBase, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -38,7 +38,7 @@ export interface DividerProps {
     size?: DividerSize;
     border?: boolean;
 }
-export interface HubspotFormProps extends HubspotEventHandlers {
+export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {
     className?: string;
     theme?: ContentTheme;
     isMobile?: boolean;

package/build/cjs/navigation/components/NavigationItem/NavigationItem.js

@@ -4,10 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../../models");
 const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
+const blockIdContext_1 = require("../../../context/blockIdContext");
 const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
 const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
 const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
 const GithubStars_1 = require("./components/GithubStars/GithubStars");
+const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -22,6 +24,8 @@ const NavigationItem = (_a) => {
     const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
     const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
-    return react_1.default.createElement(Component, Object.assign({}, componentProps));
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID },
+        react_1.default.createElement(Component, Object.assign({}, componentProps)),
+        ";"));
 };
 exports.default = NavigationItem;