@gravity-ui/blog-constructor 5.10.0 → 5.12.0

package/build/cjs/blocks/Meta/Meta.js

@@ -27,21 +27,22 @@ const breadcrumbsGoals = [
     },
 ];
 const Meta = (props) => {
-    const { paddingTop = 'l', paddingBottom = 'l', theme = 'light' } = props;
+    const { paddingTop = 'l', paddingBottom = 'l', theme = 'light', qa } = props;
     const { post } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
+    const qaAttributes = (0, common_1.getQaAttributes)(qa, 'post-info');
     const { title, id, date, readingTime, tags } = post;
     const breadcrumbs = (0, common_1.getBreadcrumbs)({ tags, pathPrefix: (locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '' });
     breadcrumbs.metrikaGoals = breadcrumbsGoals;
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, qa: "blog-meta-content" },
+        }, qa: qaAttributes.wrapper },
         breadcrumbs && (react_1.default.createElement(page_constructor_1.HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
         title && (react_1.default.createElement(page_constructor_1.YFMWrapper, { content: title, modifiers: {
                 blogBreadcrumbs: true,
                 resetPaddings: true,
             } })),
-        post && (react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: "blog-meta-block" }))));
+        post && (react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: qaAttributes.postInfo }))));
 };
 exports.Meta = Meta;

package/build/cjs/components/PostInfo/PostInfo.js

@@ -9,6 +9,7 @@ const Date_1 = require("./components/Date");
 const ReadingTime_1 = require("./components/ReadingTime");
 const Save_1 = require("./components/Save");
 const Sharing_1 = require("./components/Sharing");
+const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('post-info');
 /**
  *  Blog post info panel component
@@ -24,10 +25,11 @@ const b = (0, cn_1.block)('post-info');
  */
 const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, qa, }) => {
     const { likes } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
+    const qaAttributes = (0, common_1.getQaAttributes)(qa, 'date', 'reading-time', 'save');
     return (react_1.default.createElement("div", { className: b('container', { theme }) },
-        date && react_1.default.createElement(Date_1.Date, { date: date }),
-        readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime }),
+        date && react_1.default.createElement(Date_1.Date, { date: date, qa: qaAttributes.date }),
+        readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime, qa: qaAttributes.readingTime }),
         react_1.default.createElement(Sharing_1.Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
-        likes && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, qa: qa }))));
+        likes && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, qa: qaAttributes.save }))));
 };
 exports.PostInfo = PostInfo;

package/build/cjs/components/PostInfo/components/Date.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { PostCardSize } from '../../../models/common';
-type DateProps = {
+import { PostCardSize, QAProps } from '../../../models/common';
+type DateProps = QAProps & {
     date: string | number;
     size?: PostCardSize;
     id?: string;
 };
-export declare const Date: ({ date, size, id }: DateProps) => React.JSX.Element;
+export declare const Date: ({ date, size, id, qa }: DateProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/Date.js

@@ -8,8 +8,8 @@ const common_1 = require("../../../models/common");
 const cn_1 = require("../../../utils/cn");
 const date_1 = require("../../../utils/date");
 const b = (0, cn_1.block)('post-info');
-const Date = ({ date, size = common_1.PostCardSize.SMALL, id }) => {
+const Date = ({ date, size = common_1.PostCardSize.SMALL, id, qa }) => {
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
-    return (react_1.default.createElement("div", { className: b('item', { size }), id: id }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code)));
+    return (react_1.default.createElement("div", { className: b('item', { size }), id: id, "data-qa": qa }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code)));
 };
 exports.Date = Date;

package/build/cjs/components/PostInfo/components/ReadingTime.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-type ReadingTimeProps = {
+import { QAProps } from '../../../models/common';
+type ReadingTimeProps = QAProps & {
     readingTime: number;
     size?: 's' | 'm';
     id?: string;
 };
-export declare const ReadingTime: ({ readingTime, size, id }: ReadingTimeProps) => React.JSX.Element;
+export declare const ReadingTime: ({ readingTime, size, id, qa }: ReadingTimeProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostInfo/components/ReadingTime.js

@@ -9,7 +9,7 @@ const Time_1 = require("../../../icons/Time");
 const cn_1 = require("../../../utils/cn");
 const b = (0, cn_1.block)('post-info');
 const ICON_SIZE = 16;
-const ReadingTime = ({ readingTime, size = 's', id }) => (react_1.default.createElement("div", { className: b('item', { size }), id: id },
+const ReadingTime = ({ readingTime, size = 's', id, qa }) => (react_1.default.createElement("div", { className: b('item', { size }), id: id, "data-qa": qa },
     react_1.default.createElement("span", { className: b('icon') },
         react_1.default.createElement(uikit_1.Icon, { data: Time_1.Time, size: ICON_SIZE, className: b('icon-color') })),
     (0, i18n_1.i18)(i18n_1.Keyset.ContextReadingTime, { count: readingTime })));

package/build/cjs/components/PostInfo/components/Save.js

@@ -48,7 +48,7 @@ const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, t
             handleUserLike();
             metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);
             handleAnalytics();
-        }, "data-qa": `${qa ? qa + '-' : ''}save` },
+        }, "data-qa": qa },
         react_1.default.createElement("div", { className: b('content', { cursor: isLikeable, theme }) },
             react_1.default.createElement("span", { className: b('icon') },
                 react_1.default.createElement(uikit_1.Icon, { data: hasUserLike ? SaveFilled_1.SaveFilled : Save_1.Save, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),

package/build/cjs/containers/BlogPage/BlogPage.d.ts

@@ -1,5 +1,5 @@
 import React, { SyntheticEvent } from 'react';
-import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
+import { CustomConfig, NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
 import { GetPostsType, MetaProps, PostsProps, Service, SetQueryType, Tag, ToggleLikeCallbackType } from '../../models/common';
 export type BlogPageProps = {
     content: PageContent;
@@ -13,8 +13,9 @@ export type BlogPageProps = {
     metaData?: MetaProps;
     setQuery?: SetQueryType;
     settings?: PageConstructorProviderProps;
+    custom?: CustomConfig;
     pageCountForShowSupportButtons?: number;
     isSignedInUser?: boolean;
     onClickSignIn?: React.EventHandler<SyntheticEvent>;
 };
-export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser, onClickSignIn, }: BlogPageProps) => React.JSX.Element;
+export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, custom, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser, onClickSignIn, }: BlogPageProps) => React.JSX.Element;

package/build/cjs/containers/BlogPage/BlogPage.js

@@ -7,12 +7,13 @@ const page_constructor_1 = require("@gravity-ui/page-constructor");
 const MetaWrapper_1 = require("../../components/MetaWrapper/MetaWrapper");
 const PromptSignIn_1 = require("../../components/PromptSignIn/PromptSignIn");
 const usePromptSignInProps_1 = require("../../components/PromptSignIn/hooks/usePromptSignInProps");
-const blocksMap_1 = tslib_1.__importDefault(require("../../constructor/blocksMap"));
 const FeedContext_1 = require("../../contexts/FeedContext");
 const LikesContext_1 = require("../../contexts/LikesContext");
-const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser = false, onClickSignIn, }) => {
+const useExtendedComponentMap_1 = require("../../hooks/useExtendedComponentMap");
+const BlogPage = ({ content, posts, tags, services, getPosts, metaData, custom, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser = false, onClickSignIn, }) => {
     const _a = (0, usePromptSignInProps_1.usePromptSignInProps)(onClickSignIn), { requireSignIn } = _a, promptSignInProps = tslib_1.__rest(_a, ["requireSignIn"]);
     const likesContextData = (0, react_1.useMemo)(() => ({ toggleLike, hasLikes, isSignedInUser, requireSignIn }), [toggleLike, hasLikes, isSignedInUser, requireSignIn]);
+    const actualComponentMap = (0, useExtendedComponentMap_1.useExtendedComponentMap)(custom);
     return (react_1.default.createElement(LikesContext_1.LikesContext.Provider, { value: likesContextData },
         react_1.default.createElement(FeedContext_1.FeedContext.Provider, { value: {
                 posts: posts.posts,
@@ -25,7 +26,7 @@ const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes
             } },
             react_1.default.createElement(page_constructor_1.PageConstructorProvider, Object.assign({}, settings),
                 metaData ? react_1.default.createElement(MetaWrapper_1.MetaWrapper, Object.assign({}, metaData)) : null,
-                react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: blocksMap_1.default, navigation: navigation }))),
+                react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: actualComponentMap, navigation: navigation }))),
         react_1.default.createElement(PromptSignIn_1.PromptSignIn, Object.assign({}, promptSignInProps))));
 };
 exports.BlogPage = BlogPage;

package/build/cjs/containers/BlogPostPage/BlogPostPage.d.ts

@@ -1,6 +1,6 @@
 import React, { SyntheticEvent } from 'react';
 import { ShareOptions } from '@gravity-ui/components';
-import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
+import { CustomConfig, NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
 import { MetaProps, PostData, ToggleLikeCallbackType } from '../../models/common';
 export interface BlogPostPageProps {
     suggestedPosts: PostData[];
@@ -14,8 +14,9 @@ export interface BlogPostPageProps {
     post: PostData;
     settings?: PageConstructorProviderProps;
     navigation?: NavigationData;
+    custom?: CustomConfig;
     shareOptions?: ShareOptions[];
     isSignedInUser?: boolean;
     onClickSignIn?: React.EventHandler<SyntheticEvent>;
 }
-export declare const BlogPostPage: ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, isSignedInUser, onClickSignIn, }: BlogPostPageProps) => React.JSX.Element;
+export declare const BlogPostPage: ({ metaData, suggestedPosts, likes, content, post, settings, navigation, custom, shareOptions, isSignedInUser, onClickSignIn, }: BlogPostPageProps) => React.JSX.Element;

package/build/cjs/containers/BlogPostPage/BlogPostPage.js

@@ -7,11 +7,11 @@ const page_constructor_1 = require("@gravity-ui/page-constructor");
 const MetaWrapper_1 = require("../../components/MetaWrapper/MetaWrapper");
 const PromptSignIn_1 = require("../../components/PromptSignIn/PromptSignIn");
 const usePromptSignInProps_1 = require("../../components/PromptSignIn/hooks/usePromptSignInProps");
-const blocksMap_1 = tslib_1.__importDefault(require("../../constructor/blocksMap"));
 const LikesContext_1 = require("../../contexts/LikesContext");
 const PostPageContext_1 = require("../../contexts/PostPageContext");
+const useExtendedComponentMap_1 = require("../../hooks/useExtendedComponentMap");
 const useLikes_1 = require("../../hooks/useLikes");
-const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, isSignedInUser = false, onClickSignIn, }) => {
+const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, navigation, custom, shareOptions, isSignedInUser = false, onClickSignIn, }) => {
     const { hasUserLike, likesCount, handleLike } = (0, useLikes_1.useLikes)({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
@@ -25,6 +25,7 @@ const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings
         isSignedInUser,
         requireSignIn,
     }), [likes, isSignedInUser, requireSignIn]);
+    const actualComponentMap = (0, useExtendedComponentMap_1.useExtendedComponentMap)(custom);
     return (react_1.default.createElement(LikesContext_1.LikesContext.Provider, { value: likesContextData },
         react_1.default.createElement(PostPageContext_1.PostPageContext.Provider, { value: {
                 post,
@@ -40,7 +41,7 @@ const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings
             } },
             react_1.default.createElement(page_constructor_1.PageConstructorProvider, Object.assign({}, settings),
                 metaData ? react_1.default.createElement(MetaWrapper_1.MetaWrapper, Object.assign({}, metaData)) : null,
-                react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: blocksMap_1.default, navigation: navigation }))),
+                react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: actualComponentMap, navigation: navigation }))),
         react_1.default.createElement(PromptSignIn_1.PromptSignIn, Object.assign({}, promptSignInProps))));
 };
 exports.BlogPostPage = BlogPostPage;

package/build/cjs/contexts/PostPageContext.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { ShareOptions } from '@gravity-ui/components';
 import { PostData } from '../models/common';
+export type LikesRoutineType = {
+    handleUserLike: () => void;
+    hasUserLike: boolean;
+    likesCount: number;
+};
 export interface PostPageContextProps {
     post: PostData;
     suggestedPosts: PostData[];
-    likes?: {
-        handleUserLike: () => void;
-        hasUserLike: boolean;
-        likesCount: number;
-    };
+    likes?: LikesRoutineType;
     shareOptions?: ShareOptions[];
 }
 export declare const PostPageContext: React.Context<PostPageContextProps>;

package/build/cjs/hooks/useExtendedComponentMap.d.ts

@@ -0,0 +1,24 @@
+import { CustomConfig } from '@gravity-ui/page-constructor';
+export declare const useExtendedComponentMap: (custom: CustomConfig | undefined) => {
+    blocks: {
+        "blog-yfm-block": (props: import("../models/blocks").YFMProps) => import("react").JSX.Element;
+        "blog-layout-block": ({ fullWidth, mobileOrder, children, paddingTop, paddingBottom, }: import("react").PropsWithChildren<import("../models/blocks").LayoutProps>) => import("react").JSX.Element;
+        "blog-media-block": ({ text, paddingTop, paddingBottom, ...mediaProps }: import("../models/blocks").MediaProps) => import("react").JSX.Element;
+        "blog-banner-block": ({ color, imageSize, image, paddingTop, paddingBottom, qa, ...content }: import("../models/blocks").BannerProps) => import("react").JSX.Element;
+        "blog-cta-block": ({ items, paddingTop, paddingBottom, qa }: import("../models/blocks").CTAProps) => import("react").JSX.Element;
+        "blog-colored-text-block": ({ background, paddingTop, paddingBottom, qa, ...content }: import("../models/blocks").ColoredTextProps) => import("react").JSX.Element;
+        "blog-author-block": (props: import("../models/blocks").AuthorProps) => import("react").JSX.Element | null;
+        "blog-suggest-block": ({ paddingTop, paddingBottom }: import("../models/blocks").SuggestProps) => import("react").JSX.Element | null;
+        "blog-meta-block": (props: import("../models/blocks").MetaProps) => import("react").JSX.Element;
+        "blog-feed-block": ({ image }: import("../models/blocks").FeedProps) => import("react").JSX.Element;
+    };
+    headers: {
+        "blog-header-block": (props: import("../models/blocks").HeaderProps) => import("react").JSX.Element;
+    };
+    subBlocks?: import("@gravity-ui/page-constructor").CustomItems | undefined;
+    navigation?: import("@gravity-ui/page-constructor").CustomItems | undefined;
+    loadable?: import("@gravity-ui/page-constructor").LoadableConfig | undefined;
+    decorators?: {
+        block?: ((props: import("@gravity-ui/page-constructor").BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[] | undefined;
+    } | undefined;
+};

package/build/cjs/hooks/useExtendedComponentMap.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExtendedComponentMap = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const blocksMap_1 = tslib_1.__importDefault(require("../constructor/blocksMap"));
+const useExtendedComponentMap = (custom) => (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, custom), { blocks: Object.assign(Object.assign({}, blocksMap_1.default.blocks), (0, page_constructor_1.getCustomItems)(['blocks'], custom)), headers: Object.assign(Object.assign({}, blocksMap_1.default.headers), (0, page_constructor_1.getCustomItems)(['headers'], custom)) })), [custom]);
+exports.useExtendedComponentMap = useExtendedComponentMap;

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

@@ -30,7 +30,7 @@ export type LayoutProps = {
 export type MediaProps = ClassNameProps & PaddingsYFMProps & Partial<Pick<PCMediaProps, 'youtube' | 'previewImg' | 'image' | 'video' | 'dataLens'>> & {
     text?: string;
 };
-export type MetaProps = {
+export type MetaProps = QAProps & {
     locale: string;
     theme?: TextTheme;
 } & PaddingsYFMProps;

package/build/cjs/utils/common.d.ts

@@ -24,7 +24,9 @@ export declare const updateContentSizes: ({ size, colSizes, theme, ...contentDat
     } | Partial<Record<import("@gravity-ui/page-constructor").GridColumnSize, number>>;
     theme: import("@gravity-ui/page-constructor").ContentTheme;
     title?: string | import("@gravity-ui/page-constructor").TitleItemBaseProps | undefined;
+    titleId?: string | undefined;
     text?: string | undefined;
+    textId?: string | undefined;
     additionalInfo?: string | undefined;
     links?: import("@gravity-ui/page-constructor").LinkProps[] | undefined;
     buttons?: import("@gravity-ui/page-constructor").ButtonProps[] | undefined;

package/build/esm/blocks/Meta/Meta.js

@@ -7,7 +7,7 @@ import { LocaleContext } from '../../contexts/LocaleContext';
 import { PostPageContext } from '../../contexts/PostPageContext';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { getBreadcrumbs } from '../../utils/common';
+import { getBreadcrumbs, getQaAttributes } from '../../utils/common';
 import './Meta.css';
 const b = block('meta');
 /**
@@ -24,20 +24,21 @@ const breadcrumbsGoals = [
     },
 ];
 export const Meta = (props) => {
-    const { paddingTop = 'l', paddingBottom = 'l', theme = 'light' } = props;
+    const { paddingTop = 'l', paddingBottom = 'l', theme = 'light', qa } = props;
     const { post } = useContext(PostPageContext);
     const { locale } = useContext(LocaleContext);
+    const qaAttributes = getQaAttributes(qa, 'post-info');
     const { title, id, date, readingTime, tags } = post;
     const breadcrumbs = getBreadcrumbs({ tags, pathPrefix: (locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '' });
     breadcrumbs.metrikaGoals = breadcrumbsGoals;
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, qa: "blog-meta-content" },
+        }, qa: qaAttributes.wrapper },
         breadcrumbs && (React.createElement(HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
         title && (React.createElement(YFMWrapper, { content: title, modifiers: {
                 blogBreadcrumbs: true,
                 resetPaddings: true,
             } })),
-        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: "blog-meta-block" }))));
+        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: qaAttributes.postInfo }))));
 };

package/build/esm/components/PostInfo/PostInfo.js

@@ -5,6 +5,7 @@ import { Date } from './components/Date';
 import { ReadingTime } from './components/ReadingTime';
 import { Save } from './components/Save';
 import { Sharing } from './components/Sharing';
+import { getQaAttributes } from '../../utils/common';
 import './PostInfo.css';
 const b = block('post-info');
 /**
@@ -21,9 +22,10 @@ const b = block('post-info');
  */
 export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, qa, }) => {
     const { likes } = useContext(PostPageContext);
+    const qaAttributes = getQaAttributes(qa, 'date', 'reading-time', 'save');
     return (React.createElement("div", { className: b('container', { theme }) },
-        date && React.createElement(Date, { date: date }),
-        readingTime && React.createElement(ReadingTime, { readingTime: readingTime }),
+        date && React.createElement(Date, { date: date, qa: qaAttributes.date }),
+        readingTime && React.createElement(ReadingTime, { readingTime: readingTime, qa: qaAttributes.readingTime }),
         React.createElement(Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
-        likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, qa: qa }))));
+        likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, qa: qaAttributes.save }))));
 };

package/build/esm/components/PostInfo/components/Date.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { PostCardSize } from '../../../models/common';
+import { PostCardSize, QAProps } from '../../../models/common';
 import '../PostInfo.css';
-type DateProps = {
+type DateProps = QAProps & {
     date: string | number;
     size?: PostCardSize;
     id?: string;
 };
-export declare const Date: ({ date, size, id }: DateProps) => React.JSX.Element;
+export declare const Date: ({ date, size, id, qa }: DateProps) => React.JSX.Element;
 export {};

package/build/esm/components/PostInfo/components/Date.js

@@ -5,7 +5,7 @@ import { block } from '../../../utils/cn';
 import { format } from '../../../utils/date';
 import '../PostInfo.css';
 const b = block('post-info');
-export const Date = ({ date, size = PostCardSize.SMALL, id }) => {
+export const Date = ({ date, size = PostCardSize.SMALL, id, qa }) => {
     const { locale } = useContext(LocaleContext);
-    return (React.createElement("div", { className: b('item', { size }), id: id }, format(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code)));
+    return (React.createElement("div", { className: b('item', { size }), id: id, "data-qa": qa }, format(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code)));
 };

package/build/esm/components/PostInfo/components/ReadingTime.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { QAProps } from '../../../models/common';
 import '../PostInfo.css';
-type ReadingTimeProps = {
+type ReadingTimeProps = QAProps & {
     readingTime: number;
     size?: 's' | 'm';
     id?: string;
 };
-export declare const ReadingTime: ({ readingTime, size, id }: ReadingTimeProps) => React.JSX.Element;
+export declare const ReadingTime: ({ readingTime, size, id, qa }: ReadingTimeProps) => React.JSX.Element;
 export {};

package/build/esm/components/PostInfo/components/ReadingTime.js

@@ -6,7 +6,7 @@ import { block } from '../../../utils/cn';
 import '../PostInfo.css';
 const b = block('post-info');
 const ICON_SIZE = 16;
-export const ReadingTime = ({ readingTime, size = 's', id }) => (React.createElement("div", { className: b('item', { size }), id: id },
+export const ReadingTime = ({ readingTime, size = 's', id, qa }) => (React.createElement("div", { className: b('item', { size }), id: id, "data-qa": qa },
     React.createElement("span", { className: b('icon') },
         React.createElement(Icon, { data: Time, size: ICON_SIZE, className: b('icon-color') })),
     i18(Keyset.ContextReadingTime, { count: readingTime })));

package/build/esm/components/PostInfo/components/Save.js

@@ -45,7 +45,7 @@ export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal,
             handleUserLike();
             metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
             handleAnalytics();
-        }, "data-qa": `${qa ? qa + '-' : ''}save` },
+        }, "data-qa": qa },
         React.createElement("div", { className: b('content', { cursor: isLikeable, theme }) },
             React.createElement("span", { className: b('icon') },
                 React.createElement(Icon, { data: hasUserLike ? SaveFilled : SaveIcon, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),

package/build/esm/containers/BlogPage/BlogPage.d.ts

@@ -1,5 +1,5 @@
 import React, { SyntheticEvent } from 'react';
-import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
+import { CustomConfig, NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
 import { GetPostsType, MetaProps, PostsProps, Service, SetQueryType, Tag, ToggleLikeCallbackType } from '../../models/common';
 import './BlogPage.css';
 export type BlogPageProps = {
@@ -14,8 +14,9 @@ export type BlogPageProps = {
     metaData?: MetaProps;
     setQuery?: SetQueryType;
     settings?: PageConstructorProviderProps;
+    custom?: CustomConfig;
     pageCountForShowSupportButtons?: number;
     isSignedInUser?: boolean;
     onClickSignIn?: React.EventHandler<SyntheticEvent>;
 };
-export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser, onClickSignIn, }: BlogPageProps) => React.JSX.Element;
+export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, custom, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser, onClickSignIn, }: BlogPageProps) => React.JSX.Element;

package/build/esm/containers/BlogPage/BlogPage.js

@@ -4,13 +4,14 @@ import { PageConstructor, PageConstructorProvider, } from '@gravity-ui/page-cons
 import { MetaWrapper } from '../../components/MetaWrapper/MetaWrapper';
 import { PromptSignIn } from '../../components/PromptSignIn/PromptSignIn';
 import { usePromptSignInProps } from '../../components/PromptSignIn/hooks/usePromptSignInProps';
-import componentMap from '../../constructor/blocksMap';
 import { FeedContext } from '../../contexts/FeedContext';
 import { LikesContext } from '../../contexts/LikesContext';
+import { useExtendedComponentMap } from '../../hooks/useExtendedComponentMap';
 import './BlogPage.css';
-export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser = false, onClickSignIn, }) => {
+export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, custom, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser = false, onClickSignIn, }) => {
     const _a = usePromptSignInProps(onClickSignIn), { requireSignIn } = _a, promptSignInProps = __rest(_a, ["requireSignIn"]);
     const likesContextData = useMemo(() => ({ toggleLike, hasLikes, isSignedInUser, requireSignIn }), [toggleLike, hasLikes, isSignedInUser, requireSignIn]);
+    const actualComponentMap = useExtendedComponentMap(custom);
     return (React.createElement(LikesContext.Provider, { value: likesContextData },
         React.createElement(FeedContext.Provider, { value: {
                 posts: posts.posts,
@@ -23,6 +24,6 @@ export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, h
             } },
             React.createElement(PageConstructorProvider, Object.assign({}, settings),
                 metaData ? React.createElement(MetaWrapper, Object.assign({}, metaData)) : null,
-                React.createElement(PageConstructor, { content: content, custom: componentMap, navigation: navigation }))),
+                React.createElement(PageConstructor, { content: content, custom: actualComponentMap, navigation: navigation }))),
         React.createElement(PromptSignIn, Object.assign({}, promptSignInProps))));
 };

package/build/esm/containers/BlogPostPage/BlogPostPage.d.ts

@@ -1,6 +1,6 @@
 import React, { SyntheticEvent } from 'react';
 import { ShareOptions } from '@gravity-ui/components';
-import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
+import { CustomConfig, NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
 import { MetaProps, PostData, ToggleLikeCallbackType } from '../../models/common';
 import './BlogPostPage.css';
 export interface BlogPostPageProps {
@@ -15,8 +15,9 @@ export interface BlogPostPageProps {
     post: PostData;
     settings?: PageConstructorProviderProps;
     navigation?: NavigationData;
+    custom?: CustomConfig;
     shareOptions?: ShareOptions[];
     isSignedInUser?: boolean;
     onClickSignIn?: React.EventHandler<SyntheticEvent>;
 }
-export declare const BlogPostPage: ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, isSignedInUser, onClickSignIn, }: BlogPostPageProps) => React.JSX.Element;
+export declare const BlogPostPage: ({ metaData, suggestedPosts, likes, content, post, settings, navigation, custom, shareOptions, isSignedInUser, onClickSignIn, }: BlogPostPageProps) => React.JSX.Element;

package/build/esm/containers/BlogPostPage/BlogPostPage.js

@@ -4,12 +4,12 @@ import { PageConstructor, PageConstructorProvider, } from '@gravity-ui/page-cons
 import { MetaWrapper } from '../../components/MetaWrapper/MetaWrapper';
 import { PromptSignIn } from '../../components/PromptSignIn/PromptSignIn';
 import { usePromptSignInProps } from '../../components/PromptSignIn/hooks/usePromptSignInProps';
-import componentMap from '../../constructor/blocksMap';
 import { LikesContext } from '../../contexts/LikesContext';
 import { PostPageContext } from '../../contexts/PostPageContext';
+import { useExtendedComponentMap } from '../../hooks/useExtendedComponentMap';
 import { useLikes } from '../../hooks/useLikes';
 import './BlogPostPage.css';
-export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, isSignedInUser = false, onClickSignIn, }) => {
+export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, navigation, custom, shareOptions, isSignedInUser = false, onClickSignIn, }) => {
     const { hasUserLike, likesCount, handleLike } = useLikes({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
@@ -23,6 +23,7 @@ export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, s
         isSignedInUser,
         requireSignIn,
     }), [likes, isSignedInUser, requireSignIn]);
+    const actualComponentMap = useExtendedComponentMap(custom);
     return (React.createElement(LikesContext.Provider, { value: likesContextData },
         React.createElement(PostPageContext.Provider, { value: {
                 post,
@@ -38,6 +39,6 @@ export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, s
             } },
             React.createElement(PageConstructorProvider, Object.assign({}, settings),
                 metaData ? React.createElement(MetaWrapper, Object.assign({}, metaData)) : null,
-                React.createElement(PageConstructor, { content: content, custom: componentMap, navigation: navigation }))),
+                React.createElement(PageConstructor, { content: content, custom: actualComponentMap, navigation: navigation }))),
         React.createElement(PromptSignIn, Object.assign({}, promptSignInProps))));
 };

package/build/esm/contexts/PostPageContext.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { ShareOptions } from '@gravity-ui/components';
 import { PostData } from '../models/common';
+export type LikesRoutineType = {
+    handleUserLike: () => void;
+    hasUserLike: boolean;
+    likesCount: number;
+};
 export interface PostPageContextProps {
     post: PostData;
     suggestedPosts: PostData[];
-    likes?: {
-        handleUserLike: () => void;
-        hasUserLike: boolean;
-        likesCount: number;
-    };
+    likes?: LikesRoutineType;
     shareOptions?: ShareOptions[];
 }
 export declare const PostPageContext: React.Context<PostPageContextProps>;

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

@@ -0,0 +1,24 @@
+import { CustomConfig } from '@gravity-ui/page-constructor';
+export declare const useExtendedComponentMap: (custom: CustomConfig | undefined) => {
+    blocks: {
+        "blog-yfm-block": (props: import("../models/blocks").YFMProps) => import("react").JSX.Element;
+        "blog-layout-block": ({ fullWidth, mobileOrder, children, paddingTop, paddingBottom, }: import("react").PropsWithChildren<import("../models/blocks").LayoutProps>) => import("react").JSX.Element;
+        "blog-media-block": ({ text, paddingTop, paddingBottom, ...mediaProps }: import("../models/blocks").MediaProps) => import("react").JSX.Element;
+        "blog-banner-block": ({ color, imageSize, image, paddingTop, paddingBottom, qa, ...content }: import("../models/blocks").BannerProps) => import("react").JSX.Element;
+        "blog-cta-block": ({ items, paddingTop, paddingBottom, qa }: import("../models/blocks").CTAProps) => import("react").JSX.Element;
+        "blog-colored-text-block": ({ background, paddingTop, paddingBottom, qa, ...content }: import("../models/blocks").ColoredTextProps) => import("react").JSX.Element;
+        "blog-author-block": (props: import("../models/blocks").AuthorProps) => import("react").JSX.Element | null;
+        "blog-suggest-block": ({ paddingTop, paddingBottom }: import("../models/blocks").SuggestProps) => import("react").JSX.Element | null;
+        "blog-meta-block": (props: import("../models/blocks").MetaProps) => import("react").JSX.Element;
+        "blog-feed-block": ({ image }: import("../models/blocks").FeedProps) => import("react").JSX.Element;
+    };
+    headers: {
+        "blog-header-block": (props: import("../models/blocks").HeaderProps) => import("react").JSX.Element;
+    };
+    subBlocks?: import("@gravity-ui/page-constructor").CustomItems | undefined;
+    navigation?: import("@gravity-ui/page-constructor").CustomItems | undefined;
+    loadable?: import("@gravity-ui/page-constructor").LoadableConfig | undefined;
+    decorators?: {
+        block?: ((props: import("@gravity-ui/page-constructor").BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[] | undefined;
+    } | undefined;
+};

package/build/esm/hooks/useExtendedComponentMap.js

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+import { getCustomItems } from '@gravity-ui/page-constructor';
+import componentMap from '../constructor/blocksMap';
+export const useExtendedComponentMap = (custom) => useMemo(() => (Object.assign(Object.assign({}, custom), { blocks: Object.assign(Object.assign({}, componentMap.blocks), getCustomItems(['blocks'], custom)), headers: Object.assign(Object.assign({}, componentMap.headers), getCustomItems(['headers'], custom)) })), [custom]);

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

@@ -30,7 +30,7 @@ export type LayoutProps = {
 export type MediaProps = ClassNameProps & PaddingsYFMProps & Partial<Pick<PCMediaProps, 'youtube' | 'previewImg' | 'image' | 'video' | 'dataLens'>> & {
     text?: string;
 };
-export type MetaProps = {
+export type MetaProps = QAProps & {
     locale: string;
     theme?: TextTheme;
 } & PaddingsYFMProps;

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

@@ -24,7 +24,9 @@ export declare const updateContentSizes: ({ size, colSizes, theme, ...contentDat
     } | Partial<Record<import("@gravity-ui/page-constructor").GridColumnSize, number>>;
     theme: import("@gravity-ui/page-constructor").ContentTheme;
     title?: string | import("@gravity-ui/page-constructor").TitleItemBaseProps | undefined;
+    titleId?: string | undefined;
     text?: string | undefined;
+    textId?: string | undefined;
     additionalInfo?: string | undefined;
     links?: import("@gravity-ui/page-constructor").LinkProps[] | undefined;
     buttons?: import("@gravity-ui/page-constructor").ButtonProps[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "5.10.0",
+  "version": "5.12.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -81,11 +81,11 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^3.11.0",
     "@gravity-ui/eslint-config": "^3.1.1",
-    "@gravity-ui/page-constructor": "^4.31.1",
+    "@gravity-ui/page-constructor": "^4.37.2",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.18.1",
+    "@gravity-ui/uikit": "^5.20.0",
     "@jest/environment": "^29.7.0",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/cli": "^7.0.27",

package/server/models/blocks.d.ts

@@ -30,7 +30,7 @@ export type LayoutProps = {
 export type MediaProps = ClassNameProps & PaddingsYFMProps & Partial<Pick<PCMediaProps, 'youtube' | 'previewImg' | 'image' | 'video' | 'dataLens'>> & {
     text?: string;
 };
-export type MetaProps = {
+export type MetaProps = QAProps & {
     locale: string;
     theme?: TextTheme;
 } & PaddingsYFMProps;