@gravity-ui/page-constructor 2.23.0-alpha.0 → 2.23.0-alpha.1

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

@@ -153,6 +153,84 @@ export declare const SecurityBlock: {
                     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;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                 };
             };
             points: {

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

@@ -148,6 +148,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/Media/Media.js

@@ -44,7 +44,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: getFullscreen({ 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: getFullscreen({ 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, fullscreen, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen, 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/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/navigation.d.ts

@@ -63,7 +63,6 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
-    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/build/cjs/navigation/components/Header/Header.css

@@ -9,8 +9,6 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
-}
-.pc-header_with-border {
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .pc-header__wrapper {

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const Control_1 = tslib_1.__importDefault(require("../../../components/Control/Control"));
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const grid_1 = require("../../../grid");
@@ -28,10 +27,9 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
 };
 const iconSizeKey = 'iconSize';
 const Header = ({ data, logo }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
+    const { leftItems, rightItems, iconSize = 20 } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
     const [activeItemId, setactiveItemId] = (0, react_1.useState)(undefined);
-    const [withHeaderBorder, setWithHeaderBorder] = (0, react_1.useState)(withBorder);
     const getNavigationItemWithIconSize = (0, react_1.useCallback)((item) => {
         if (!(iconSizeKey in item)) {
             return Object.assign(Object.assign({}, item), { iconSize });
@@ -52,19 +50,7 @@ const Header = ({ data, logo }) => {
     const hideSidebar = (0, react_1.useCallback)(() => {
         setIsSidebarOpened(false);
     }, []);
-    (0, react_1.useEffect)(() => {
-        const handleScroll = () => {
-            if (window.scrollY > 0 && !withBorder) {
-                setWithHeaderBorder(true);
-            }
-            else if (window.scrollY === 0 && !withBorder) {
-                setWithHeaderBorder(false);
-            }
-        };
-        window.addEventListener('scroll', lodash_1.default.debounce(handleScroll, 5), { passive: true });
-        return () => window.removeEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
-    });
-    return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': withHeaderBorder }) },
+    return (react_1.default.createElement(grid_1.Grid, { className: b() },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement("header", { className: b('wrapper') },

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

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

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

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

@@ -140,6 +140,88 @@ 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[];
+            };
             type: {};
             when: {};
         };

package/build/cjs/sub-blocks/MediaCard/schema.js

@@ -6,6 +6,6 @@ exports.MediaCardBlock = {
     'media-card': {
         additionalProperties: false,
         required: [],
-        properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.MediaProps), common_1.AnimatableProps),
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), common_1.MediaProps), common_1.AnimatableProps),
     },
 };

package/build/esm/blocks/Header/Header.css

@@ -6,6 +6,7 @@
 unpredictable css rules order in build */
 .pc-header-block {
   position: relative;
+  margin: 16px 0;
 }
 .pc-header-block_full-width {
   --pc-border-radius: 0;
@@ -29,16 +30,16 @@ unpredictable css rules order in build */
   margin: 16px 0;
 }
 .pc-header-block__content_vertical-offset_s {
-  padding: 64px 0;
+  padding: 48px 0;
 }
 .pc-header-block__content_vertical-offset_m {
-  padding: 96px 0;
+  padding: calc(96px - 16px) 0;
 }
 .pc-header-block__content_vertical-offset_l {
-  padding: 128px 0;
+  padding: calc(128px - 16px) 0;
 }
 .pc-header-block__content_vertical-offset_xl {
-  padding: 160px 0;
+  padding: calc(160px - 16px) 0;
 }
 .pc-header-block__content_offset_large {
   padding: calc(128px - 16px) 0 16px;
@@ -94,10 +95,10 @@ unpredictable css rules order in build */
 .pc-header-block__media {
   position: absolute;
   display: none;
-  top: 16px;
+  top: 0;
   right: 0;
   width: 50%;
-  height: calc(100% - 2 * 16px);
+  height: 100%;
   overflow: hidden;
   object-fit: cover;
   border-radius: var(--pc-border-radius);