@gravity-ui/page-constructor 1.14.0-alpha.8 → 1.15.0-alpha.0

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

@@ -9,6 +9,7 @@ import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { PlayVideo } from '../../icons';
+import { useAnalytics } from '../../hooks';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -16,7 +17,7 @@ const FPS = 60;
 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, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -31,6 +32,7 @@ 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();
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -79,6 +81,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 playIcon = useMemo(() => {
         let playButtonContent;
         switch (type) {
@@ -104,12 +108,27 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
+        if (handleAnalytics && analyticsEvents) {
+            const events = isMuted ? playEvents : stopEvents;
+            if (events) {
+                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,
+        analyticsEvents,
+        playEvents,
+        stopEvents,
+        setProps,
+    ]);
     const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
@@ -120,7 +139,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
+        if (handleAnalytics && analyticsEvents) {
+            if (playEvents) {
+                handleAnalytics(playEvents);
+            }
+        }
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, 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 { AnalyticsEvent } from '../../models/common';
+import { AnalyticsEventV2 } from '../../models/common';
 export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
 export interface YandexFormProps {
     id: number | string;
@@ -15,7 +15,7 @@ export interface YandexFormProps {
     onLoad?: () => void;
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 declare const YandexForm: (props: YandexFormProps) => JSX.Element;
 export default YandexForm;

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

@@ -4,7 +4,7 @@ import { LocaleContext } from '../../context/localeContext';
 import { MobileContext } from '../../context/mobileContext';
 import { block } from '../../utils';
 import { useMetrika } from '../../hooks/useMetrika';
-import { useAnalytics } from '../..//hooks/useAnalytics';
+import { useAnalytics } from '../..//hooks';
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = block('yandex-form');
@@ -55,7 +55,7 @@ const YandexForm = (props) => {
             window.scrollBy(0, top - headerHeight);
         }
         handleMetrika({ metrikaGoals, pixelEvents });
-        handleAnalytics(analyticsEvents);
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
         if (onSubmit) {
             onSubmit();
         }

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

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

package/build/esm/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/esm/hooks/index.js

@@ -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/esm/hooks/useAnalytics.d.ts

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

package/build/esm/hooks/useAnalytics.js

@@ -2,10 +2,13 @@ import { useContext } from 'react';
 import { AnalyticsContext } from '../context/analyticsContext';
 export const useAnalytics = () => {
     const { sendEvents } = useContext(AnalyticsContext);
+    if (!sendEvents) {
+        return undefined;
+    }
     return (e) => {
         if (!e) {
             return;
         }
-        sendEvents === null || sendEvents === void 0 ? void 0 : sendEvents(e);
+        sendEvents(e);
     };
 };

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

@@ -66,17 +66,23 @@ export interface ClassNameProps {
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
 export type AnalyticsParameter = {
     key: string;
-    value: string;
+    value: string | number | boolean;
+};
+export type AnalyticsCounters = {
+    include?: string[];
+    exclude?: string[];
 };
 export type AnalyticsEvent = {
     name: string;
     type?: string;
-    counters?: {
-        include?: string[];
-        exclude?: string[];
-    };
+    counters?: AnalyticsCounters;
     category?: string;
     label?: string;
     params?: AnalyticsParameter[];
 };
+export type AnalyticsEventV2<T = {}> = T & {
+    name: string;
+    type?: string;
+    counters?: AnalyticsCounters;
+};
 export {};

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 { AnalyticsEvent, ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventV2, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -110,6 +110,7 @@ export interface MediaVideoProps {
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
+    analyticsEvents?: AnalyticsEventV2[];
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -121,7 +122,7 @@ export interface LinkProps extends Stylable {
     target?: string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface FileLinkProps extends ClassNameProps {
     href: string;
@@ -140,7 +141,7 @@ export interface ButtonProps {
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEvent[];
+    analyticsEvents?: AnalyticsEventV2[];
     target?: string;
 }
 export interface ButtonImageProps {
@@ -169,6 +170,7 @@ export interface MediaComponentVideoProps {
     video: MediaVideoProps;
     height?: number;
     metrika?: MetrikaVideo;
+    analyticsEvents?: AnalyticsEventV2[];
     previewImg?: string;
 }
 export interface MediaComponentYoutubeProps {
@@ -224,7 +226,7 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     theme?: TextTheme;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface PreviewContentItemProps {
     title: string;

package/build/esm/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 { AnalyticsEvent, PixelEvent } from '../common';
+import { AnalyticsEventV2, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -61,7 +61,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
-    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;

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

@@ -11,7 +11,7 @@ export interface NavigationItemBase {
     icon?: ImageProps;
     url?: string;
 }
-export interface NavigationLinkItem extends NavigationItemBase {
+export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
     arrow?: boolean;
@@ -19,8 +19,6 @@ export interface NavigationLinkItem extends NavigationItemBase {
 }
 export interface NavigationButtonItem extends ButtonProps {
     type: NavigationItemType.Button;
-    url: string;
-    target?: string;
 }
 export interface NavigationDropdownItem extends NavigationItemBase {
     type: NavigationItemType.Dropdown;

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

@@ -18,25 +18,27 @@ unpredictable css rules order in build */
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .pc-header__mobile-menu-button {
+  .pc-header__mobile-menu-button.pc-header__mobile-menu-button {
     display: none;
   }
 }
+
 .pc-header__navigation, .pc-header__left, .pc-header__right {
   display: flex;
   align-items: center;
 }
-.pc-header__navigation {
+.pc-header__navigation.pc-header__navigation {
   position: relative;
   margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
 }
 @media (max-width: 768px) {
-  .pc-header__navigation {
+  .pc-header__navigation.pc-header__navigation {
     display: none;
   }
 }
+
 .pc-header__right {
   flex: 0;
   justify-content: flex-end;

package/build/esm/navigation/components/Logo/Logo.css

@@ -1,4 +1,4 @@
-.pc-logo {
+.pc-logo__text {
   margin: 0;
 }
 
@@ -7,11 +7,6 @@ unpredictable css rules order in build */
 .pc-logo {
   display: flex;
   align-items: center;
-  font-weight: var(--yc-text-accent-font-weight);
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
 }
 .pc-logo__icon {
   display: flex;
@@ -19,5 +14,9 @@ unpredictable css rules order in build */
   object-fit: contain;
 }
 .pc-logo__text {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
   white-space: nowrap;
 }

package/build/esm/navigation/components/NavigationItem/NavigationItem.css

@@ -4,6 +4,7 @@ unpredictable css rules order in build */
   position: relative;
   display: flex;
   align-items: center;
+  white-space: nowrap;
 }
 .pc-navigation-item_type_link {
   color: var(--yc-color-text-primary);

package/build/esm/navigation/schema.d.ts

@@ -0,0 +1,60 @@
+export declare const LogoProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        icon: {
+            oneOf: ({
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            } | {
+                type: string;
+                pattern: string;
+            })[];
+        };
+        text: {
+            type: string;
+            contentType: string;
+        };
+        url: {
+            type: string;
+        };
+    };
+};
+export declare const NavigationHeaderProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        leftItems: {
+            oneOf: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            }[];
+        };
+        rightItems: {
+            oneOf: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            }[];
+        };
+    };
+};

package/build/esm/navigation/schema.js

@@ -0,0 +1,77 @@
+import { ButtonProps } from '../schema/validators/common';
+import { ImageProps, urlPattern } from '../components/Image/schema';
+import { omit } from 'lodash';
+import { filteredArray } from '../schema/validators/utils';
+const NavigationItemType = {
+    type: 'string',
+    enum: ['link', 'button', 'dropdown'],
+};
+export const LogoProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['icon'],
+    properties: {
+        icon: ImageProps,
+        text: {
+            type: 'string',
+            contentType: 'text',
+        },
+        url: {
+            type: 'string',
+        },
+    },
+};
+const NavigationItemBaseProps = {
+    text: {
+        type: 'string',
+        contentType: 'text',
+    },
+    url: {
+        type: 'string',
+    },
+    icon: {
+        type: 'string',
+        pattern: urlPattern,
+    },
+};
+const NavigationItemBaseLinkProps = omit(NavigationItemBaseProps, ['url']);
+const NavigationLinkItemProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'text'],
+    properties: Object.assign(Object.assign({}, NavigationItemBaseLinkProps), { type: Object.assign({}, NavigationItemType), url: {
+            type: 'string',
+        }, target: {
+            type: 'string',
+        }, arrow: {
+            type: 'boolean',
+        } }),
+};
+const NavigationButtonItemProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'text', 'url'],
+    properties: Object.assign(Object.assign({}, ButtonProps), { type: Object.assign({}, NavigationItemType) }),
+};
+const NavigationDropdownItemProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'items'],
+    properties: Object.assign(Object.assign({}, NavigationItemBaseProps), { type: Object.assign({}, NavigationItemType), items: filteredArray(NavigationLinkItemProps) }),
+};
+const NavigationItemProps = {
+    oneOf: [
+        filteredArray(NavigationLinkItemProps),
+        filteredArray(NavigationButtonItemProps),
+        filteredArray(NavigationDropdownItemProps),
+    ],
+};
+export const NavigationHeaderProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['leftItems'],
+    properties: {
+        leftItems: NavigationItemProps,
+        rightItems: NavigationItemProps,
+    },
+};

package/build/esm/schema/index.d.ts

@@ -31,6 +31,73 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
     additionalProperties: boolean;
     required: string[];
     properties: {
+        logo: {
+            oneOf: ({
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    icon: {
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                        })[];
+                    };
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                };
+            } | {
+                type: string;
+                additionalProperties: boolean;
+                required: import("..").Theme[];
+                properties: {};
+            })[];
+        };
+        header: {
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                leftItems: {
+                    oneOf: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    }[];
+                };
+                rightItems: {
+                    oneOf: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    }[];
+                };
+            };
+        };
         blocks: {
             type: string;
             items: {

package/build/esm/schema/index.js

@@ -3,6 +3,7 @@ import { TabsBlock, BannerCard, SliderBlock, ExtendedFeaturesBlock, HeaderBlock,
 import { PartnerBlock, MediaCardBlock, TutorialCard, BackgroundCard, NewsCard, CardWithImage, PriceDetailedBlock, Quote, Divider, BasicCard, } from './validators/sub-blocks';
 import { AnimatableProps, BackgroundProps, MenuProps, withTheme } from './validators/common';
 import { filteredItem } from './validators/utils';
+import { LogoProps, NavigationHeaderProps } from './validators/navigation';
 export const getBlocksCases = (blocks) => {
     return Object.values(blocks).reduce((acc, block) => (Object.assign(Object.assign({}, acc), block)));
 };
@@ -83,7 +84,7 @@ export function generateDefaultSchema(config) {
         type: 'object',
         additionalProperties: false,
         required: ['blocks'],
-        properties: Object.assign(Object.assign(Object.assign({}, AnimatableProps), { blocks: {
+        properties: Object.assign(Object.assign(Object.assign({}, AnimatableProps), { logo: withTheme(LogoProps), header: NavigationHeaderProps, blocks: {
                 type: 'array',
                 items: {
                     $ref: '#/definitions/children',