@gravity-ui/page-constructor 1.12.0 → 1.13.0-alpha.0

package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts

@@ -155,6 +155,20 @@ export declare const PromoFeaturesBlock: {
         additionalProperties: boolean;
         required: string[];
         properties: {
+            theme: {
+                enum: string[];
+            };
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -178,27 +192,12 @@ export declare const PromoFeaturesBlock: {
                     };
                 } | {
                     type: string;
-                    contentType: string;
                 })[];
             };
             description: {
                 type: string;
                 contentType: string;
             };
-            theme: {
-                enum: string[];
-            };
-            items: {
-                type: string;
-                items: {
-                    type: string;
-                    properties: {
-                        when: {
-                            type: string;
-                        };
-                    };
-                };
-            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/PromoFeaturesBlock/schema.js

@@ -1,4 +1,4 @@
-import { AnimatableProps, BlockBaseProps, TitleProps } from '../../schema/validators/common';
+import { AnimatableProps, BlockBaseProps, BlockHeaderProps } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
 import { Media } from '../Media/schema';
 export const PromoFeaturesItem = {
@@ -23,12 +23,7 @@ export const PromoFeaturesBlock = {
     'promo-features-block': {
         additionalProperties: false,
         required: ['items'],
-        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), { title: {
-                oneOf: [{ type: 'string', contentType: 'text' }, TitleProps],
-            }, description: {
-                type: 'string',
-                contentType: 'text',
-            }, theme: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { theme: {
                 enum: ['grey', 'default'],
             }, items: filteredArray(PromoFeaturesItem) }),
     },

package/build/esm/blocks/Slider/schema.d.ts

@@ -5,31 +5,6 @@ export declare const SliderProps: {
     arrows: {
         type: string;
     };
-    description: {
-        type: string;
-        contentType: string;
-    };
-    title: {
-        type: string;
-        additionalProperties: boolean;
-        required: string[];
-        properties: {
-            text: {
-                type: string;
-                contentType: string;
-            };
-            textSize: {
-                type: string;
-                enum: string[];
-            };
-            url: {
-                type: string;
-            };
-            resetMargin: {
-                type: string;
-            };
-        };
-    };
     randomOrder: {
         type: string;
     };
@@ -108,36 +83,40 @@ export declare const SliderBlock: {
         additionalProperties: boolean;
         required: never[];
         properties: {
-            dots: {
-                type: string;
-            };
-            arrows: {
-                type: string;
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
             };
             description: {
                 type: string;
                 contentType: string;
             };
-            title: {
+            dots: {
+                type: string;
+            };
+            arrows: {
                 type: string;
-                additionalProperties: boolean;
-                required: string[];
-                properties: {
-                    text: {
-                        type: string;
-                        contentType: string;
-                    };
-                    textSize: {
-                        type: string;
-                        enum: string[];
-                    };
-                    url: {
-                        type: string;
-                    };
-                    resetMargin: {
-                        type: string;
-                    };
-                };
             };
             randomOrder: {
                 type: string;

package/build/esm/blocks/Slider/schema.js

@@ -1,4 +1,4 @@
-import { BlockBaseProps, TitleProps, AnimatableProps, ChildrenCardsProps, sliderSizesObject, textSize, } from '../../schema/validators/common';
+import { BlockBaseProps, AnimatableProps, ChildrenCardsProps, sliderSizesObject, textSize, BlockHeaderProps, } from '../../schema/validators/common';
 const LoadableProps = {
     additionalProperties: false,
     required: ['source'],
@@ -48,11 +48,6 @@ export const SliderProps = {
     arrows: {
         type: 'boolean',
     },
-    description: {
-        type: 'string',
-        contentType: 'text',
-    },
-    title: TitleProps,
     randomOrder: {
         type: 'boolean',
     },
@@ -69,6 +64,6 @@ export const SliderBlock = {
     'slider-block': {
         additionalProperties: false,
         required: [],
-        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), SliderProps),
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), SliderProps), BlockHeaderProps),
     },
 };

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

@@ -272,31 +272,6 @@ export declare const TabsBlock: {
         additionalProperties: boolean;
         required: string[];
         properties: {
-            title: {
-                type: string;
-                additionalProperties: boolean;
-                required: string[];
-                properties: {
-                    text: {
-                        type: string;
-                        contentType: string;
-                    };
-                    textSize: {
-                        type: string;
-                        enum: string[];
-                    };
-                    url: {
-                        type: string;
-                    };
-                    resetMargin: {
-                        type: string;
-                    };
-                };
-            };
-            description: {
-                type: string;
-                contentType: string;
-            };
             tabsColSizes: {};
             direction: {
                 type: string;
@@ -316,6 +291,35 @@ export declare const TabsBlock: {
                     };
                 };
             };
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+            description: {
+                type: string;
+                contentType: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

package/build/esm/blocks/Tabs/schema.js

@@ -1,5 +1,5 @@
 import { filteredArray } from '../../schema/validators/utils';
-import { LinkProps, withTheme, BlockBaseProps, TitleProps, MediaProps, containerSizesArray, sizeNumber, mediaDirection, } from '../../schema/validators/common';
+import { LinkProps, withTheme, BlockBaseProps, BlockHeaderProps, MediaProps, containerSizesArray, sizeNumber, mediaDirection, } from '../../schema/validators/common';
 import { ImageProps } from '../../components/Image/schema';
 import _ from 'lodash';
 import { ContentBase } from '../../sub-blocks/Content/schema';
@@ -24,10 +24,7 @@ export const TabsBlock = {
     'tabs-block': {
         additionalProperties: false,
         required: ['title', 'items'],
-        properties: Object.assign(Object.assign({}, BlockBaseProps), { title: TitleProps, description: {
-                type: 'string',
-                contentType: 'text',
-            }, tabsColSizes: containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: sizeNumber })), {}), direction: {
+        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), BlockHeaderProps), { tabsColSizes: containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: sizeNumber })), {}), direction: {
                 type: 'string',
                 enum: mediaDirection,
             }, centered: { type: 'boolean' }, items: filteredArray(tabsItem) }),

package/build/esm/components/BlockHeader/BlockHeader.css

@@ -1,27 +1,16 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-BlockHeader__description {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  margin-top: 16px;
-}
-.pc-BlockHeader__description_titleSize_s {
-  margin-top: 8px;
+.pc-block-header__description {
+  margin-top: 12px;
 }
-.pc-BlockHeader__description_titleSize_l {
+.pc-block-header__description .yfm {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
 }
-.pc-BlockHeader__description a {
-  outline: none;
-  color: var(--yc-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-}
-.utilityfocus .pc-BlockHeader__description a:focus {
-  outline: 2px solid #ffdb4d;
+.pc-block-header__description_titleSize_s {
+  margin-top: 8px;
 }
-.pc-BlockHeader__description a:hover, .pc-BlockHeader__description a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+.pc-block-header__description_titleSize_s .yfm {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }

package/build/esm/components/BlockHeader/BlockHeader.js

@@ -2,9 +2,10 @@ import { __rest } from "tslib";
 import React from 'react';
 import { block } from '../../utils';
 import { Col } from '../../grid';
-import { Title, HTML } from '../';
+import { Title } from '../';
+import YFMWrapper from '../YFMWrapper/YFMWrapper';
 import './BlockHeader.css';
-const b = block('BlockHeader');
+const b = block('block-header');
 const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
     if (!title && !description) {
         return null;
@@ -13,8 +14,8 @@ const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm:
     return (React.createElement("div", { className: b(null, className) },
         text && (React.createElement(Col, { reset: true, sizes: colSizes },
             React.createElement(Title, Object.assign({ text: text }, titleProps)))),
-        description && (React.createElement(Col, { reset: true, sizes: { all: 12, sm: 8 } },
+        description && (React.createElement(Col, { reset: true, sizes: colSizes },
             React.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
-                React.createElement(HTML, null, description))))));
+                React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))))));
 };
 export default BlockHeader;

package/build/esm/components/Button/Button.js

@@ -11,14 +11,14 @@ const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { lang, tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const { className, metrikaGoals, pixelEvents, gaEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "gaEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
     const onClick = useCallback(() => {
-        handleMetrika({ metrikaGoals, pixelEvents });
+        handleMetrika({ metrikaGoals, pixelEvents, gaEvents });
         if (onClickOrigin) {
             onClickOrigin();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, onClickOrigin]);
+    }, [handleMetrika, metrikaGoals, pixelEvents, gaEvents, onClickOrigin]);
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };

package/build/esm/components/CardBase/CardBase.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
-import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+import { ButtonPixel, CardBaseProps as CardBaseParams, GAEvents, ImageProps, MetrikaGoal, WithChildren } from '../../models';
 import './CardBase.css';
 export interface CardBaseProps extends CardBaseParams {
     className?: string;
@@ -10,6 +10,7 @@ export interface CardBaseProps extends CardBaseParams {
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    gaEvents?: GAEvents;
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -9,7 +9,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, gaEvents, contentClassName, children, url, target, border = 'shadow', } = props;
     const handleMetrika = useMetrika();
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {
@@ -42,7 +42,7 @@ export const Layout = (props) => {
             footer && React.createElement("div", { className: b('footer', footerClass) }, footer))));
     const fullClassName = b({ border }, className);
     const onClick = () => {
-        handleMetrika({ metrikaGoals, pixelEvents });
+        handleMetrika({ metrikaGoals, pixelEvents, gaEvents });
     };
     return url ? (React.createElement(RouterLink, { href: url },
         React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (React.createElement("div", { className: fullClassName }, cardContent));

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -4,10 +4,10 @@ import { useMetrika } from '../../hooks/useMetrika';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
 export default function HeaderBreadcrumbs(props) {
-    const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
+    const { items, metrikaGoals, pixelEvents, gaEvents, theme = 'light', className } = props;
     const handleMetrika = useMetrika();
     const onClick = () => {
-        handleMetrika({ metrikaGoals, pixelEvents });
+        handleMetrika({ metrikaGoals, pixelEvents, gaEvents });
     };
     return (React.createElement("div", { className: b({ theme }, className) }, items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
         React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));

package/build/esm/components/Link/Link.js

@@ -23,14 +23,14 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, gaEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
     const handleMetrika = useMetrika();
     const { hostname } = useContext(LocationContext);
     const { tld } = useContext(LocaleContext);
     const href = setUrlTld(props.url, tld);
     const defaultTextSize = theme === 'back' ? 'l' : 'm';
     const onClick = () => {
-        handleMetrika({ metrikaGoals, pixelEvents });
+        handleMetrika({ metrikaGoals, pixelEvents, gaEvents });
     };
     const getLinkByType = () => {
         switch (theme) {

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Metrika, Pixel } from '../../models';
+import { GaInline, Metrika, Pixel } from '../../models';
 export interface MetrikaContextProps {
     metrika?: Metrika;
     pixel?: Pixel;
+    gaInline?: GaInline;
 }
 export declare const MetrikaContext: React.Context<MetrikaContextProps>;

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

@@ -1,7 +1,8 @@
-import { ButtonPixel, MetrikaGoal, PixelEvent } from '../models';
+import { ButtonPixel, MetrikaGoal, PixelEvent, GAEvents } from '../models';
 type UseMetrikaProps = {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
+    gaEvents?: GAEvents;
 };
-export declare const useMetrika: () => ({ metrikaGoals, pixelEvents }: UseMetrikaProps) => void;
+export declare const useMetrika: () => ({ metrikaGoals, pixelEvents, gaEvents }: UseMetrikaProps) => void;
 export {};

package/build/esm/hooks/useMetrika.js

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import { useContext } from 'react';
 import { MetrikaContext } from '../context/metrikaContext';
 import { PixelEventType } from '../models';
@@ -9,8 +10,8 @@ function isButtonPixel(pixelEvents) {
     return false;
 }
 export const useMetrika = () => {
-    const { metrika, pixel } = useContext(MetrikaContext);
-    return ({ metrikaGoals, pixelEvents }) => {
+    const { metrika, pixel, gaInline } = useContext(MetrikaContext);
+    return ({ metrikaGoals, pixelEvents, gaEvents }) => {
         if (metrika && metrikaGoals) {
             if (isNewMetrikaFormat(metrikaGoals)) {
                 metrikaGoals.forEach(({ name, isCrossSite }) => metrika.reachGoal(isCrossSite ? 'cross-site' : 'main', name));
@@ -33,5 +34,12 @@ export const useMetrika = () => {
                 pixel.track(pixelEvents);
             }
         }
+        if (gaInline && gaEvents) {
+            const gaEventsArray = Array.isArray(gaEvents) ? gaEvents : [gaEvents];
+            gaEventsArray.forEach((_a) => {
+                var { eventName } = _a, rest = __rest(_a, ["eventName"]);
+                gaInline.event(eventName, rest);
+            });
+        }
     };
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MetrikaGoal } from './';
+import { GAEventParams, MetrikaGoal } from './';
 export interface Refable<T> {
     ref?: React.Ref<T>;
 }
@@ -45,6 +45,9 @@ export interface Metrika {
     reachGoal: (counterName: string, ...args: any) => void;
     reachGoals: (goals: MetrikaGoal, counterName?: string) => void;
 }
+export interface GaInline {
+    event: (eventName: string, params?: GAEventParams) => void;
+}
 export interface ClassNameProps {
     className?: string;
 }

package/build/esm/models/constructor-items/common.d.ts

@@ -121,6 +121,7 @@ export interface LinkProps extends Stylable {
     target?: string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    gaEvents?: GAEvents;
 }
 export interface FileLinkProps extends ClassNameProps {
     href: string;
@@ -139,6 +140,7 @@ export interface ButtonProps {
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    gaEvents?: GAEvents;
     target?: string;
 }
 export interface ButtonImageProps {
@@ -222,6 +224,7 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     theme?: TextTheme;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    gaEvents?: GAEvents;
 }
 export interface PreviewContentItemProps {
     title: string;
@@ -337,4 +340,22 @@ export interface BlockHeaderProps {
     title?: TitleProps | string;
     description?: string;
 }
+export declare type GaParameterValue = string | number | boolean;
+declare type GACommandConfig<T> = T & {
+    [key: string]: GaParameterValue;
+};
+declare type GACommonParams = {
+    groups?: string | string[];
+    sendTo?: string | string[];
+    eventTimeout?: number;
+};
+export declare type GAEventParams = GACommandConfig<GACommonParams & {
+    eventCategory?: string;
+    eventLabel?: string;
+    value?: number;
+}>;
+export type GAEvent = GAEventParams & {
+    eventName: string;
+};
+export type GAEvents = GAEvent | GAEvent[];
 export {};