@gravity-ui/page-constructor 3.0.0 → 3.1.1

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

@@ -145,6 +145,84 @@ export declare const tabsItem: {
                     fullscreen: {
                         type: string;
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                    context: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                 };
             } | {
                 type: string;

package/build/cjs/components/BlockBase/BlockBase.js

@@ -8,9 +8,9 @@ const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings, qa } = props;
+    const { anchor, visible, children, className, resetPaddings, qa, index = 0 } = props;
     return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        react_1.default.createElement(BlockDecoration_1.BlockDecoration, null,
+        react_1.default.createElement(BlockDecoration_1.BlockDecoration, { id: index },
             anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
             children)));
 };

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

@@ -42,7 +42,7 @@ const Media = (props) => {
             }
         }
         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 }));
+            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, analyticsEvents: analyticsEvents }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import { AnalyticsEventsBase } from '../../models/common';
 export declare const AUTOPLAY_ATTRIBUTES: {
     autoplay: number;
     mute: number;
 };
 export declare function getHeight(width: number): number;
-export interface VideoBlockProps {
+export interface VideoBlockProps extends AnalyticsEventsBase {
     id?: string;
     stream?: string;
     record?: string;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -6,7 +6,9 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const uuid_1 = require("uuid");
+const useAnalytics_1 = require("../../hooks/useAnalytics");
 const icons_1 = require("../../icons");
+const common_1 = require("../../models/common");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
@@ -39,7 +41,8 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
+    const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
@@ -48,11 +51,12 @@ const VideoBlock = (props) => {
     const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
     const fullId = id || (0, uuid_1.v4)();
     const onPreviewClick = (0, react_1.useCallback)(() => {
+        handleAnalytics(analyticsEvents);
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, exports.AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
         }
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
-    }, [src, attributes]);
+    }, [handleAnalytics, analyticsEvents, src, attributes]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps {
+import { Block, BlockBaseProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockBaseProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

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

@@ -6,8 +6,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
-const ConstructorBlock = ({ data, children, }) => {
+const ConstructorBlock = ({ index = 0, data, children, }) => {
     const { anchor, visible, type } = data;
-    return (react_1.default.createElement(BlockBase_1.default, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+    return (react_1.default.createElement(BlockBase_1.default, { index: index, className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
 };
 exports.ConstructorBlock = ConstructorBlock;

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

@@ -4,7 +4,6 @@ exports.ConstructorBlocks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
 const utils_1 = require("../../../../utils");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
@@ -35,9 +34,12 @@ const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, blockKey: blockId }, children));
+            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
+        return blockTypes.includes(item.type) ? (
+        //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
+        // components relying on constructor inner structure like Slider or blog-constructor will be refactored
+        react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
     return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts

@@ -3,5 +3,5 @@ export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
-export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -3,13 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorHeader = exports.ConstructorItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
 const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
-const ConstructorItem = ({ data, children }) => {
+const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
-    return react_1.default.createElement(Component, Object.assign({}, rest), children);
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey },
+        react_1.default.createElement(Component, Object.assign({}, rest), children)));
 };
 exports.ConstructorItem = ConstructorItem;
 const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { id: data.type },

package/build/cjs/customization/BlockDecoration.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { BlockDecorationProps } from '../models';
-export declare const BlockDecoration: (props: PropsWithChildren<BlockDecorationProps>) => JSX.Element;
+export declare const BlockDecoration: ({ id, children: blockChildren, }: PropsWithChildren<BlockDecorationProps>) => JSX.Element;

package/build/cjs/customization/BlockDecoration.js

@@ -3,20 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockDecoration = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const blockIdContext_1 = require("../context/blockIdContext");
 const innerContext_1 = require("../context/innerContext");
-const utils_1 = require("../utils");
-const BlockDecoration = (props) => {
+const BlockDecoration = ({ id, children: blockChildren, }) => {
     var _a, _b;
-    const blockContenxtId = (0, utils_1.getBlockIndexFromId)((0, react_1.useContext)(blockIdContext_1.BlockIdContext));
     const { headerBlockTypes } = (0, react_1.useContext)(innerContext_1.InnerContext);
-    const blockId = props.id || blockContenxtId;
-    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
-    const block = react_1.default.createElement(react_1.Fragment, null, props.children);
+    const isHeader = Boolean(typeof id === 'string' && headerBlockTypes.includes(id));
+    const block = react_1.default.createElement(react_1.Fragment, null, blockChildren);
     const blockDecorators = (_b = (_a = (0, react_1.useContext)(innerContext_1.InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
     if (!blockDecorators) {
         return block;
     }
-    return blockDecorators.reduce((children, decorator) => (react_1.default.createElement(react_1.Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+    return blockDecorators.reduce((children, decorator) => react_1.default.createElement(react_1.Fragment, null, decorator({ children, id, isHeader })), block);
 };
 exports.BlockDecoration = BlockDecoration;

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

@@ -79,7 +79,8 @@ export declare enum DefaultEventNames {
     HubspotFormSubmit = "hubspot-form-submit",
     QuoteButton = "quote-button-click",
     BackLink = "back-link-click",
-    Breadcrumb = "breadcrumb-click"
+    Breadcrumb = "breadcrumb-click",
+    VideoPreview = "video-preview-click"
 }
 export type AnalyticsCounters = {
     include?: string[];

package/build/cjs/models/common.js

@@ -48,4 +48,5 @@ var DefaultEventNames;
     DefaultEventNames["QuoteButton"] = "quote-button-click";
     DefaultEventNames["BackLink"] = "back-link-click";
     DefaultEventNames["Breadcrumb"] = "breadcrumb-click";
+    DefaultEventNames["VideoPreview"] = "video-preview-click";
 })(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));

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

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 export interface BlockDecoratorProps extends PropsWithChildren {
     id: string | number;

package/build/cjs/schema/validators/common.d.ts

@@ -1117,6 +1117,84 @@ export declare const MediaProps: {
     fullscreen: {
         type: string;
     };
+    analyticsEvents: {
+        anyOf: ({
+            type: string;
+            additionalProperties: {
+                type: string;
+            };
+            required: string[];
+            properties: {
+                name: {
+                    type: string;
+                };
+                type: {
+                    type: string;
+                };
+                counters: {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: never[];
+                    properties: {
+                        include: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                        exclude: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                    };
+                };
+                context: {
+                    type: string;
+                };
+            };
+        } | {
+            type: string;
+            items: {
+                type: string;
+                additionalProperties: {
+                    type: string;
+                };
+                required: string[];
+                properties: {
+                    name: {
+                        type: string;
+                    };
+                    type: {
+                        type: string;
+                    };
+                    counters: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            include: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                            exclude: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    context: {
+                        type: string;
+                    };
+                };
+            };
+        })[];
+    };
 };
 export declare const YMapMarkerLabel: {
     type: string;

package/build/cjs/schema/validators/common.js

@@ -460,6 +460,9 @@ exports.MediaProps = {
     fullscreen: {
         type: 'boolean',
     },
+    analyticsEvents: {
+        anyOf: [event_1.AnalyticsEventSchema, { type: 'array', items: event_1.AnalyticsEventSchema }],
+    },
 };
 exports.YMapMarkerLabel = {
     type: 'object',

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts

@@ -135,6 +135,84 @@ export declare const LayoutItem: {
             fullscreen: {
                 type: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
         };
         content: Partial<{
             title: {

package/build/cjs/sub-blocks/MediaCard/schema.d.ts

@@ -137,6 +137,84 @@ export declare const MediaCardBlock: {
             fullscreen: {
                 type: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -11,4 +11,3 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
 export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
-export declare const getBlockIndexFromId: (blockId?: string) => number;

package/build/cjs/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -83,5 +83,3 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
-const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };
-exports.getBlockIndexFromId = getBlockIndexFromId;