@gravity-ui/page-constructor 4.1.2 → 4.3.12-alpha.3

package/build/cjs/models/constructor-items/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVideoControlsType = exports.MediaVideoType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -30,6 +30,11 @@ var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes = exports.PlayButtonThemes || (exports.PlayButtonThemes = {}));
+var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

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

@@ -71,13 +71,13 @@ export interface QuoteProps extends Themable, CardBaseProps {
     buttonText?: string;
     theme?: TextTheme;
 }
-export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
 }
-export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
     target?: string;
@@ -92,9 +92,9 @@ export interface BannerCardProps {
     theme?: TextTheme;
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
 }
-export interface MediaCardProps extends MediaProps, CardBaseProps {
+export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
 }
-export interface LayoutItemProps extends ClassNameProps {
+export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media: MediaProps;
     metaInfo?: string[];

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

@@ -6,7 +6,12 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
+export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
+    indent?: {
+        top?: string;
+        bottom?: string;
+    };
+};
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;
@@ -39,6 +44,7 @@ export interface CustomConfig {
     blocks?: CustomItems;
     subBlocks?: CustomItems;
     headers?: CustomItems;
+    navigation?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
         block?: ((props: BlockDecorationProps) => React.ReactElement)[];

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

@@ -7,6 +7,7 @@ export declare enum NavigationItemType {
     Social = "social",
     GithubButton = "github-button"
 }
+export declare const NavigationItemTypes: NavigationItemType[];
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;

package/build/cjs/models/navigation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
+exports.NavigationGithubButtonIcon = exports.NavigationItemTypes = exports.NavigationItemType = void 0;
 var NavigationItemType;
 (function (NavigationItemType) {
     NavigationItemType["Link"] = "link";
@@ -9,6 +9,7 @@ var NavigationItemType;
     NavigationItemType["Social"] = "social";
     NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+exports.NavigationItemTypes = Object.values(NavigationItemType);
 var NavigationGithubButtonIcon;
 (function (NavigationGithubButtonIcon) {
     NavigationGithubButtonIcon["heart"] = "octicon-heart";

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

@@ -10,6 +10,7 @@ const b = (0, utils_1.block)('mobile-menu-button');
 const ICON_SIZE = 36;
 const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (react_1.default.createElement(components_1.Control, { className: b(), onClick: (e) => {
         e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
         onSidebarOpenedChange(!isSidebarOpened);
     }, size: "l", icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: ICON_SIZE }));
 exports.MobileMenuButton = MobileMenuButton;

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

@@ -12,7 +12,7 @@ unpredictable css rules order in build */
 .utilityfocus .pc-navigation-item:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-navigation-item__content:hover, .pc-navigation-item__content:active {
+.pc-navigation-item__content:not(.pc-navigation-item__content_type_button):hover, .pc-navigation-item__content:not(.pc-navigation-item__content_type_button):active {
   color: var(--g-color-text-link);
 }
 .pc-navigation-item_menu-layout_desktop {

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

@@ -4,28 +4,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = require("lodash");
 const blockIdContext_1 = require("../../../context/blockIdContext");
+const innerContext_1 = require("../../../context/innerContext");
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
-const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
-const GithubButton_1 = require("./components/GithubButton/GithubButton");
-const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
-const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
-const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
 const b = (0, utils_1.block)('navigation-item');
 const ANALYTICS_ID = 'navigation';
-//todo: add types support form component in map
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const NavigationItemsMap = {
-    [models_1.NavigationItemType.Button]: NavigationButton_1.NavigationButton,
-    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
-    [models_1.NavigationItemType.Dropdown]: NavigationDropdown_1.NavigationDropdown,
-    [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
-    [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
-};
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = tslib_1.__rest(_a, ["data", "className", "menuLayout"]);
     const { type = models_1.NavigationItemType.Link } = data;
-    const Component = NavigationItemsMap[type];
+    const { navItemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const Component = navItemMap[type];
     const componentProps = (0, react_1.useMemo)(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);
         if (type !== models_1.NavigationItemType.Dropdown) {
@@ -35,6 +23,6 @@ const NavigationItem = (_a) => {
     }, [data, props, type]);
     return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID },
         react_1.default.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
-            react_1.default.createElement(Component, Object.assign({}, componentProps, { className: b('content') })))));
+            react_1.default.createElement(Component, Object.assign({}, componentProps, { className: b('content', { type }) })))));
 };
 exports.default = NavigationItem;

package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js

@@ -24,7 +24,7 @@ const NavigationLink = (props) => {
     }
     else {
         return (react_1.default.createElement(components_1.RouterLink, { href: url, passHref: true },
-            react_1.default.createElement("a", Object.assign({}, rest, { className: classes }), content)));
+            react_1.default.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
     }
 };
 exports.NavigationLink = NavigationLink;

package/build/cjs/navigation/components/NavigationItem/index.d.ts

@@ -0,0 +1,6 @@
+export { GithubButton } from './components/GithubButton/GithubButton';
+export { NavigationButton } from './components/NavigationButton/NavigationButton';
+export { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
+export { NavigationLink } from './components/NavigationLink/NavigationLink';
+import NavigationItem from './NavigationItem';
+export default NavigationItem;

package/build/cjs/navigation/components/NavigationItem/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationLink = exports.NavigationDropdown = exports.NavigationButton = exports.GithubButton = void 0;
+const tslib_1 = require("tslib");
+var GithubButton_1 = require("./components/GithubButton/GithubButton");
+Object.defineProperty(exports, "GithubButton", { enumerable: true, get: function () { return GithubButton_1.GithubButton; } });
+var NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
+Object.defineProperty(exports, "NavigationButton", { enumerable: true, get: function () { return NavigationButton_1.NavigationButton; } });
+var NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
+Object.defineProperty(exports, "NavigationDropdown", { enumerable: true, get: function () { return NavigationDropdown_1.NavigationDropdown; } });
+var NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
+Object.defineProperty(exports, "NavigationLink", { enumerable: true, get: function () { return NavigationLink_1.NavigationLink; } });
+const NavigationItem_1 = tslib_1.__importDefault(require("./NavigationItem"));
+exports.default = NavigationItem_1.default;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem"));
 const NavigationListItem = (_a) => {
     var { column, index, activeItemId, onActiveItemChange } = _a, props = tslib_1.__rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;

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

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const models_1 = require("../../models");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem"));
 const b = (0, utils_1.block)('navigation-popup');
 const OFFSET_RESET = [0, 0];
 const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (react_1.default.createElement(uikit_1.Popup

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

@@ -8,7 +8,8 @@ const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
     const iconData = (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    const { alt } = iconData;
+    return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, iconData))));
 };
 exports.default = SocialIcon;

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

@@ -205,6 +205,25 @@ export declare const cardSchemas: {
                             type: string;
                             pattern: string;
                         };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
                         alt: {
                             type: string;
                             contentType: string;
@@ -230,6 +249,87 @@ export declare const cardSchemas: {
                 type: string;
                 enum: string[];
             };
+            analyticsEvents: {
+                oneOf: ({
+                    optionName: string;
+                    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;
+                        };
+                    };
+                    items?: undefined;
+                } | {
+                    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;
+                            };
+                        };
+                    };
+                    optionName: string;
+                })[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -708,6 +808,87 @@ export declare const cardSchemas: {
         additionalProperties: boolean;
         required: never[];
         properties: {
+            analyticsEvents: {
+                oneOf: ({
+                    optionName: string;
+                    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;
+                        };
+                    };
+                    items?: undefined;
+                } | {
+                    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;
+                            };
+                        };
+                    };
+                    optionName: string;
+                })[];
+            };
             animated: {
                 type: string;
             };
@@ -852,84 +1033,6 @@ export declare const cardSchemas: {
             fullscreen: {
                 type: string;
             };
-            analyticsEvents: {
-                anyOf: ({
-                    type: string;
-                    additionalProperties: {
-                        type: string;
-                    };
-                    required: string[];
-                    properties: {
-                        name: {
-                            type: string;
-                        };
-                        type: {
-                            type: string;
-                        };
-                        counters: {
-                            type: string;
-                            additionalProperties: boolean;
-                            required: never[];
-                            properties: {
-                                include: {
-                                    type: string;
-                                    items: {
-                                        type: string;
-                                    };
-                                };
-                                exclude: {
-                                    type: string;
-                                    items: {
-                                        type: string;
-                                    };
-                                };
-                            };
-                        };
-                        context: {
-                            type: string;
-                        };
-                    };
-                } | {
-                    type: string;
-                    items: {
-                        type: string;
-                        additionalProperties: {
-                            type: string;
-                        };
-                        required: string[];
-                        properties: {
-                            name: {
-                                type: string;
-                            };
-                            type: {
-                                type: string;
-                            };
-                            counters: {
-                                type: string;
-                                additionalProperties: boolean;
-                                required: never[];
-                                properties: {
-                                    include: {
-                                        type: string;
-                                        items: {
-                                            type: string;
-                                        };
-                                    };
-                                    exclude: {
-                                        type: string;
-                                        items: {
-                                            type: string;
-                                        };
-                                    };
-                                };
-                            };
-                            context: {
-                                type: string;
-                            };
-                        };
-                    };
-                })[];
-            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -8,12 +8,11 @@ const utils_1 = require("../../utils");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const b = (0, utils_1.block)('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, } = props;
     const theme = (0, theme_1.useTheme)();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
-    const link = hasBackgroundColor || border === 'line' ? undefined : url;
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: link, border: borderType },
+    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents },
         react_1.default.createElement(components_1.CardBase.Content, null,
             react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
             react_1.default.createElement(Content_1.default, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));

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

@@ -16,6 +16,25 @@ export declare const BackgroundCard: {
                             type: string;
                             pattern: string;
                         };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
                         alt: {
                             type: string;
                             contentType: string;
@@ -41,6 +60,87 @@ export declare const BackgroundCard: {
                 type: string;
                 enum: string[];
             };
+            analyticsEvents: {
+                oneOf: ({
+                    optionName: string;
+                    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;
+                        };
+                    };
+                    items?: undefined;
+                } | {
+                    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;
+                            };
+                        };
+                    };
+                    optionName: string;
+                })[];
+            };
             title: {
                 oneOf: ({
                     type: string;

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
+const event_1 = require("../../schema/validators/event");
 const schema_2 = require("../Content/schema");
 const BackgroundCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size']);
 exports.BackgroundCard = {
@@ -18,6 +19,15 @@ exports.BackgroundCard = {
             }, paddingBottom: {
                 type: 'string',
                 enum: ['s', 'm', 'l', 'xl'],
+            }, analyticsEvents: {
+                oneOf: [
+                    Object.assign(Object.assign({}, event_1.AnalyticsEventSchema), { optionName: 'single' }),
+                    {
+                        type: 'array',
+                        items: event_1.AnalyticsEventSchema,
+                        optionName: 'list',
+                    },
+                ],
             } }),
     },
 };