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

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

@@ -2,6 +2,7 @@
 import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
+import { AnalyticsEventsBase } from '../common';
 import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps } from './common';
 import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
@@ -32,6 +33,7 @@ export interface Childable {
 export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
+    /** @deprecated */
     resetPaddings?: boolean;
     qa?: string;
 }
@@ -141,6 +143,10 @@ export interface QuestionItem {
 export interface QuestionsProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     items: QuestionItem[];
 }
+export interface QuestionBlockItemProps extends QuestionItem {
+    isOpened: boolean;
+    onClick: () => void;
+}
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
@@ -185,6 +191,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;
@@ -232,14 +242,15 @@ export interface FilterBlockProps extends Animatable, LoadableChildren {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
 }
+export interface IconsBlockItemProps extends AnalyticsEventsBase {
+    url: string;
+    text: string;
+    src: string;
+}
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
-    items: {
-        url: string;
-        text: string;
-        src: string;
-    }[];
+    items: IconsBlockItemProps[];
 }
 interface ContentLayoutBlockParams {
     size?: ContentSize;

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

@@ -1,6 +1,6 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
-import { ThemeSupporting } from '../../utils/theme';
+import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
@@ -25,6 +25,10 @@ export declare enum PlayButtonThemes {
     Blue = "blue",
     Grey = "grey"
 }
+export declare enum CustomControlsType {
+    WithMuteButton = "with-mute-button",
+    WithPlayPauseButton = "with-play-pause-button"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -61,6 +65,12 @@ export interface Stylable {
 export interface Animatable {
     animated?: boolean;
 }
+export interface Tabbable {
+    tabIndex?: number;
+}
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;
@@ -104,9 +114,11 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     elapsedTime?: number;
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
+    customControlsOptions?: CustomControlsOptions;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
-export interface LinkProps extends AnalyticsEventsBase, Stylable {
+export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
     text?: string;
     textSize?: TextSize;
@@ -117,7 +129,7 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
 }
-export interface FileLinkProps extends ClassNameProps {
+export interface FileLinkProps extends ClassNameProps, Tabbable {
     href: string;
     text: ReactNode;
     type?: FileLinkType;
@@ -126,7 +138,7 @@ export interface FileLinkProps extends ClassNameProps {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
     text: string;
     url: string;
     primary?: boolean;
@@ -142,22 +154,14 @@ export interface ButtonImageProps {
     position?: ButtonImagePosition;
     alt?: string;
 }
+export interface CustomControlsOptions {
+    type?: CustomControlsType;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;
     text?: string;
 }
-export interface MediaVideoProps {
-    src: string[];
-    type?: MediaVideoType;
-    loop?: LoopProps | boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    elapsedTime?: number;
-    playButton?: PlayButtonProps;
-    controls?: MediaVideoControlsType;
-    metrika?: MetrikaVideo;
-}
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
@@ -182,7 +186,7 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
-export interface BackgroundMediaProps extends MediaProps, Animatable {
+export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;
@@ -283,7 +287,7 @@ export interface PriceDetailsListProps {
 export interface PriceDetailsProps {
     items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];
 }
-export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps {
+export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps, AnalyticsEventsBase {
 }
 export interface PriceFoldableDetailsProps {
     title: string;
@@ -308,24 +312,6 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface PriceDetailedProps extends CardBaseProps {
-    items: PriceItemProps[];
-    description?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-        titleColor?: PriceDescriptionColor;
-    };
-    details?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-    };
-    priceType?: PriceDetailsType;
-    numberGroupItems?: 3 | 4 | 5;
-    isCombined?: boolean;
-    useMixedView?: boolean;
-    foldable?: PriceFoldableDetailsProps;
-    labelsDefaultText?: Record<PriceLabelColor, string>;
-}
 export interface AuthorProps extends QAProps {
     author: AuthorItem;
     className?: string;

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

@@ -27,6 +27,11 @@ export var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes || (PlayButtonThemes = {}));
+export var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType || (CustomControlsType = {}));
 export var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

package/build/esm/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/esm/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/esm/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/esm/models/navigation.js

@@ -6,6 +6,7 @@ export var NavigationItemType;
     NavigationItemType["Social"] = "social";
     NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType || (NavigationItemType = {}));
+export const NavigationItemTypes = Object.values(NavigationItemType);
 export var NavigationGithubButtonIcon;
 (function (NavigationGithubButtonIcon) {
     NavigationGithubButtonIcon["heart"] = "octicon-heart";

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

@@ -7,5 +7,6 @@ const b = block('mobile-menu-button');
 const ICON_SIZE = 36;
 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 }));

package/build/esm/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/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -1,30 +1,18 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { omit } from 'lodash';
 import { BlockIdContext } from '../../../context/blockIdContext';
+import { InnerContext } from '../../../context/innerContext';
 import { NavigationItemType } from '../../../models';
 import { block } from '../../../utils';
-import SocialIcon from '../SocialIcon/SocialIcon';
-import { GithubButton } from './components/GithubButton/GithubButton';
-import { NavigationButton } from './components/NavigationButton/NavigationButton';
-import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
-import { NavigationLink } from './components/NavigationLink/NavigationLink';
 import './NavigationItem.css';
 const b = 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 = {
-    [NavigationItemType.Button]: NavigationButton,
-    [NavigationItemType.Social]: SocialIcon,
-    [NavigationItemType.Dropdown]: NavigationDropdown,
-    [NavigationItemType.Link]: NavigationLink,
-    [NavigationItemType.GithubButton]: GithubButton,
-};
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
     const { type = NavigationItemType.Link } = data;
-    const Component = NavigationItemsMap[type];
+    const { navItemMap } = useContext(InnerContext);
+    const Component = navItemMap[type];
     const componentProps = useMemo(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);
         if (type !== NavigationItemType.Dropdown) {
@@ -34,6 +22,6 @@ const NavigationItem = (_a) => {
     }, [data, props, type]);
     return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
         React.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
-            React.createElement(Component, Object.assign({}, componentProps, { className: b('content') })))));
+            React.createElement(Component, Object.assign({}, componentProps, { className: b('content', { type }) })))));
 };
 export default NavigationItem;

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

@@ -22,6 +22,6 @@ export const NavigationLink = (props) => {
     }
     else {
         return (React.createElement(RouterLink, { href: url, passHref: true },
-            React.createElement("a", Object.assign({}, rest, { className: classes }), content)));
+            React.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
     }
 };

package/build/esm/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/esm/navigation/components/NavigationItem/index.js

@@ -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/esm/navigation/components/NavigationListItem/NavigationListItem.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { getItemClickHandler } from '../../utils';
-import NavigationItem from '../NavigationItem/NavigationItem';
+import NavigationItem from '../NavigationItem';
 const NavigationListItem = (_a) => {
     var { column, index, activeItemId, onActiveItemChange } = _a, props = __rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import { NavigationLayout } from '../../models';
-import NavigationItem from '../NavigationItem/NavigationItem';
+import NavigationItem from '../NavigationItem';
 import './NavigationPopup.css';
 const b = block('navigation-popup');
 const OFFSET_RESET = [0, 0];

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

@@ -6,7 +6,8 @@ import './SocialIcon.css';
 const b = block('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
     const iconData = getMediaImage(icon);
-    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    const { alt } = iconData;
+    return (React.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
 };
 export default SocialIcon;

package/build/esm/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[];