@gravity-ui/page-constructor 4.55.0 → 5.0.0

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

@@ -1,9 +1,9 @@
 import { ClassNameProps, QuoteType } from '../../models';
 import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
-import { AnalyticsEventsBase, PixelEvent } from '../common';
+import { AnalyticsEventsBase } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonProps, CardBaseProps, CardLayoutProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -70,7 +70,6 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
      * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame
      */
     onLoad?: (arg: HubspotEventData) => void;
-    pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
     createDOMElement?: boolean;
 }
@@ -97,14 +96,14 @@ export interface QuoteProps extends Themable, CardBaseProps {
     quoteType?: QuoteType;
     button?: ButtonProps;
 }
-export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
 }
-export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     urlTitle?: string;
     icon?: ImageProps;
@@ -134,7 +133,7 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
     backgroundColor?: string;
     list?: string[];
 }
-export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
+export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media?: MediaProps;
     metaInfo?: string[];
@@ -161,6 +160,7 @@ export type LayoutItemModel = {
 export type BackgroundCardModel = {
     type: SubBlockType.BackgroundCard;
 } & BackgroundCardProps;
+/** @deprecated */
 export type PriceDetailedModel = {
     type: SubBlockType.PriceDetailed;
 } & PriceDetailedProps;

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

@@ -1,6 +1,4 @@
 import { Block, ConstructorItem, FormBlockData, FormBlockHubspotData, FormBlockYandexData } from './';
-import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
-export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
 export declare function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData;
 export declare function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData;

package/build/esm/models/guards.js

@@ -2,9 +2,6 @@ import { BlockTypes, } from './';
 export function isBlock(block) {
     return block.type in BlockTypes;
 }
-export function isNewMetrikaFormat(metrika) {
-    return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
-}
 export function isYandexDataForm(data) {
     return Boolean(data.yandex);
 }

package/build/esm/navigation/components/MobileMenuButton/MobileMenuButton.js

@@ -1,12 +1,12 @@
 import React from 'react';
+import { Bars, Xmark } from '@gravity-ui/icons';
 import { Control } from '../../../components';
-import { NavigationClose, NavigationOpen } from '../../../icons';
 import { block } from '../../../utils';
 import './MobileMenuButton.css';
 const b = block('mobile-menu-button');
-const ICON_SIZE = 36;
+const ICON_SIZE = 24;
 export const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (React.createElement(Control, { className: b(), onClick: (e) => {
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
         onSidebarOpenedChange(!isSidebarOpened);
-    }, size: "l", icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: ICON_SIZE }));
+    }, size: "l", icon: isSidebarOpened ? Xmark : Bars, iconSize: ICON_SIZE }));

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

@@ -154,94 +154,6 @@ export declare const cardSchemas: {
                                 optionName: string;
                             })[];
                         };
-                        metrikaGoals: {
-                            oneOf: ({
-                                type: string;
-                                optionName: string;
-                                items?: undefined;
-                            } | {
-                                type: string;
-                                items: {
-                                    type: string;
-                                    additionalProperties?: undefined;
-                                    required?: undefined;
-                                    properties?: undefined;
-                                };
-                                optionName: string;
-                            } | {
-                                type: string;
-                                items: {
-                                    type: string;
-                                    additionalProperties: boolean;
-                                    required: string[];
-                                    properties: {
-                                        name: {
-                                            type: string;
-                                        };
-                                        isCrossSite: {
-                                            type: string;
-                                        };
-                                    };
-                                };
-                                optionName: string;
-                            })[];
-                        };
-                        pixelEvents: {
-                            type: string;
-                            items: {
-                                type: string;
-                                required: string[];
-                                additionalProperties: boolean;
-                                properties: {
-                                    name: {
-                                        type: string;
-                                        enum: import("../models").PixelEventType[];
-                                    };
-                                    data: {};
-                                };
-                                select: {
-                                    $data: string;
-                                };
-                                selectCases: {
-                                    SubmitApplication: {
-                                        additionalProperties: boolean;
-                                        properties: {
-                                            name: {};
-                                        };
-                                    };
-                                    Contact: {
-                                        additionalProperties: boolean;
-                                        properties: {
-                                            name: {};
-                                        };
-                                    };
-                                    Lead: {
-                                        additionalProperties: boolean;
-                                        properties: {
-                                            name: {};
-                                            data: {
-                                                type: string;
-                                                additionalProperties: boolean;
-                                                properties: {
-                                                    content_category: {
-                                                        type: string;
-                                                    };
-                                                    content_name: {
-                                                        type: string;
-                                                    };
-                                                    currency: {
-                                                        type: string;
-                                                    };
-                                                    value: {
-                                                        type: string;
-                                                    };
-                                                };
-                                            };
-                                        };
-                                    };
-                                };
-                            };
-                        };
                         analyticsEvents: {
                             oneOf: ({
                                 optionName: string;
@@ -476,6 +388,10 @@ export declare const cardSchemas: {
                     type: string;
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             border: {
                 type: string;
                 enum: string[];
@@ -518,6 +434,10 @@ export declare const cardSchemas: {
                 type: string;
                 enum: string[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -855,6 +775,10 @@ export declare const cardSchemas: {
                     optionName: string;
                 })[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -1142,94 +1066,6 @@ export declare const cardSchemas: {
                             optionName: string;
                         })[];
                     };
-                    metrikaGoals: {
-                        oneOf: ({
-                            type: string;
-                            optionName: string;
-                            items?: undefined;
-                        } | {
-                            type: string;
-                            items: {
-                                type: string;
-                                additionalProperties?: undefined;
-                                required?: undefined;
-                                properties?: undefined;
-                            };
-                            optionName: string;
-                        } | {
-                            type: string;
-                            items: {
-                                type: string;
-                                additionalProperties: boolean;
-                                required: string[];
-                                properties: {
-                                    name: {
-                                        type: string;
-                                    };
-                                    isCrossSite: {
-                                        type: string;
-                                    };
-                                };
-                            };
-                            optionName: string;
-                        })[];
-                    };
-                    pixelEvents: {
-                        type: string;
-                        items: {
-                            type: string;
-                            required: string[];
-                            additionalProperties: boolean;
-                            properties: {
-                                name: {
-                                    type: string;
-                                    enum: import("../models").PixelEventType[];
-                                };
-                                data: {};
-                            };
-                            select: {
-                                $data: string;
-                            };
-                            selectCases: {
-                                SubmitApplication: {
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        name: {};
-                                    };
-                                };
-                                Contact: {
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        name: {};
-                                    };
-                                };
-                                Lead: {
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        name: {};
-                                        data: {
-                                            type: string;
-                                            additionalProperties: boolean;
-                                            properties: {
-                                                content_category: {
-                                                    type: string;
-                                                };
-                                                content_name: {
-                                                    type: string;
-                                                };
-                                                currency: {
-                                                    type: string;
-                                                };
-                                                value: {
-                                                    type: string;
-                                                };
-                                            };
-                                        };
-                                    };
-                                };
-                            };
-                        };
-                    };
                     analyticsEvents: {
                         oneOf: ({
                             optionName: string;

package/build/esm/schema/constants.js

@@ -19,6 +19,7 @@ export const constructorBlockSchemaNames = [
     'info-block',
     'table-block',
     'tabs-block',
+    /** @deprecated */
     'price-detailed',
     'header-slider-block',
     'cards-with-image-block',
@@ -32,6 +33,7 @@ export const constructorBlockSchemaNames = [
 export const constructorCardSchemaNames = [
     'media-card',
     'banner-card',
+    /** @deprecated */
     'price-detailed',
     'background-card',
     'quote',

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

@@ -590,100 +590,6 @@ export declare const ButtonProps: {
             optionName: string;
         })[];
     };
-    /**
-     * @deprecated Metrika will be deleted
-     */
-    metrikaGoals: {
-        oneOf: ({
-            type: string;
-            optionName: string;
-            items?: undefined;
-        } | {
-            type: string;
-            items: {
-                type: string;
-                additionalProperties?: undefined;
-                required?: undefined;
-                properties?: undefined;
-            };
-            optionName: string;
-        } | {
-            type: string;
-            items: {
-                type: string;
-                additionalProperties: boolean;
-                required: string[];
-                properties: {
-                    name: {
-                        type: string;
-                    };
-                    isCrossSite: {
-                        type: string;
-                    };
-                };
-            };
-            optionName: string;
-        })[];
-    };
-    /**
-     * @deprecated Pixel will be deleted
-     */
-    pixelEvents: {
-        type: string;
-        items: {
-            type: string;
-            required: string[];
-            additionalProperties: boolean;
-            properties: {
-                name: {
-                    type: string;
-                    enum: import("../../models").PixelEventType[];
-                };
-                data: {};
-            };
-            select: {
-                $data: string;
-            };
-            selectCases: {
-                SubmitApplication: {
-                    additionalProperties: boolean;
-                    properties: {
-                        name: {};
-                    };
-                };
-                Contact: {
-                    additionalProperties: boolean;
-                    properties: {
-                        name: {};
-                    };
-                };
-                Lead: {
-                    additionalProperties: boolean;
-                    properties: {
-                        name: {};
-                        data: {
-                            type: string;
-                            additionalProperties: boolean;
-                            properties: {
-                                content_category: {
-                                    type: string;
-                                };
-                                content_name: {
-                                    type: string;
-                                };
-                                currency: {
-                                    type: string;
-                                };
-                                value: {
-                                    type: string;
-                                };
-                            };
-                        };
-                    };
-                };
-            };
-        };
-    };
     analyticsEvents: {
         oneOf: ({
             optionName: string;
@@ -933,100 +839,6 @@ export declare const ButtonBlock: {
                 optionName: string;
             })[];
         };
-        /**
-         * @deprecated Metrika will be deleted
-         */
-        metrikaGoals: {
-            oneOf: ({
-                type: string;
-                optionName: string;
-                items?: undefined;
-            } | {
-                type: string;
-                items: {
-                    type: string;
-                    additionalProperties?: undefined;
-                    required?: undefined;
-                    properties?: undefined;
-                };
-                optionName: string;
-            } | {
-                type: string;
-                items: {
-                    type: string;
-                    additionalProperties: boolean;
-                    required: string[];
-                    properties: {
-                        name: {
-                            type: string;
-                        };
-                        isCrossSite: {
-                            type: string;
-                        };
-                    };
-                };
-                optionName: string;
-            })[];
-        };
-        /**
-         * @deprecated Pixel will be deleted
-         */
-        pixelEvents: {
-            type: string;
-            items: {
-                type: string;
-                required: string[];
-                additionalProperties: boolean;
-                properties: {
-                    name: {
-                        type: string;
-                        enum: import("../../models").PixelEventType[];
-                    };
-                    data: {};
-                };
-                select: {
-                    $data: string;
-                };
-                selectCases: {
-                    SubmitApplication: {
-                        additionalProperties: boolean;
-                        properties: {
-                            name: {};
-                        };
-                    };
-                    Contact: {
-                        additionalProperties: boolean;
-                        properties: {
-                            name: {};
-                        };
-                    };
-                    Lead: {
-                        additionalProperties: boolean;
-                        properties: {
-                            name: {};
-                            data: {
-                                type: string;
-                                additionalProperties: boolean;
-                                properties: {
-                                    content_category: {
-                                        type: string;
-                                    };
-                                    content_name: {
-                                        type: string;
-                                    };
-                                    currency: {
-                                        type: string;
-                                    };
-                                    value: {
-                                        type: string;
-                                    };
-                                };
-                            };
-                        };
-                    };
-                };
-            };
-        };
         analyticsEvents: {
             oneOf: ({
                 optionName: string;

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

@@ -1,7 +1,6 @@
 import { ImageProps } from '../../components/Image/schema';
 import { CustomControlsButtonPositioning, CustomControlsType, MediaVideoControlsType, QuoteType, Theme, } from '../../models';
 import { AnalyticsEventSchema } from './event';
-import { pixelEvents } from './pixel';
 export const mediaDirection = ['media-content', 'content-media'];
 export const textSize = ['s', 'm', 'l'];
 export const containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
@@ -365,36 +364,6 @@ export const ButtonProps = {
             },
         ],
     },
-    /**
-     * @deprecated Metrika will be deleted
-     */
-    metrikaGoals: {
-        oneOf: [
-            { type: 'string', optionName: 'single' },
-            { type: 'array', items: { type: 'string' }, optionName: 'list' },
-            {
-                type: 'array',
-                items: {
-                    type: 'object',
-                    additionalProperties: false,
-                    required: ['name'],
-                    properties: {
-                        name: {
-                            type: 'string',
-                        },
-                        isCrossSite: {
-                            type: 'boolean',
-                        },
-                    },
-                },
-                optionName: 'list-extended',
-            },
-        ],
-    },
-    /**
-     * @deprecated Pixel will be deleted
-     */
-    pixelEvents,
     analyticsEvents: {
         oneOf: [
             Object.assign(Object.assign({}, AnalyticsEventSchema), { optionName: 'single' }),

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

@@ -2,7 +2,6 @@ import * as blocks from './blocks';
 import * as common from './common';
 import * as components from './components';
 import * as navigation from './navigation';
-import * as pixel from './pixel';
 import * as subBlocks from './sub-blocks';
 import * as utils from './utils';
 export declare const validators: {
@@ -10,7 +9,6 @@ export declare const validators: {
     common: typeof common;
     components: typeof components;
     subBlocks: typeof subBlocks;
-    pixel: typeof pixel;
     utils: typeof utils;
     navigation: typeof navigation;
 };

package/build/esm/schema/validators/index.js

@@ -2,7 +2,6 @@ import * as blocks from './blocks';
 import * as common from './common';
 import * as components from './components';
 import * as navigation from './navigation';
-import * as pixel from './pixel';
 import * as subBlocks from './sub-blocks';
 import * as utils from './utils';
 export const validators = {
@@ -10,7 +9,6 @@ export const validators = {
     common,
     components,
     subBlocks,
-    pixel,
     utils,
     navigation,
 };

package/build/esm/sub-blocks/BackgroundCard/BackgroundCard.js

@@ -1,18 +1,30 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useUniqId } from '@gravity-ui/uikit';
 import { BackgroundImage, CardBase } from '../../components/';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import Content from '../Content/Content';
+import renderCardFooterControlsContainer from '../renderCardFooterControlsContainer/renderCardFooterControlsContainer';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, controlPosition = 'content', } = props;
+    const titleId = useUniqId();
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
+    const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
+    const footerControls = useMemo(() => renderContentControls({
+        links: areControlsInFooter ? links : undefined,
+        buttons: areControlsInFooter ? buttons : undefined,
+        size: 's',
+        titleId,
+    }, renderCardFooterControlsContainer), [areControlsInFooter, links, buttons, titleId]);
     return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         React.createElement(CardBase.Content, null,
             React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
-            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));
+            React.createElement(Content, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: areControlsInFooter ? undefined : links, buttons: areControlsInFooter ? undefined : buttons, colSizes: { all: 12, md: 12 } })),
+        footerControls));
 };
 export default BackgroundCard;

package/build/esm/sub-blocks/BackgroundCard/schema.d.ts

@@ -144,6 +144,10 @@ export declare const BackgroundCard: {
                     optionName: string;
                 })[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/esm/sub-blocks/BackgroundCard/schema.js

@@ -26,6 +26,9 @@ export const BackgroundCard = {
                         optionName: 'list',
                     },
                 ],
+            }, controlPosition: {
+                type: 'string',
+                enum: ['content', 'footer'],
             } }),
     },
 };