@gravity-ui/blog-constructor 5.16.1-alpha.1 → 6.0.0

package/README.md

@@ -60,14 +60,14 @@ import {
 } from '@gravity-ui/blog-constructor/server';
 ```
 
-## i18n
-
-To make sure the i18n library used in your project runs properly, perform its initialization and set the project's current locale value in `lang`. For example:
+The `blog-constructor` is a `uikit-based` library, and we use an instance of `i18n` from uikit. To set up internationalization, you just need to use the `configure` from uikit:
 
 ```typescript
-import {configure, Lang} from '@gravity-ui/blog-constructor';
+import {configure} from '@gravity-ui/uikit';
 
-configure({lang: Lang.En});
+configure({
+  lang: 'ru',
+});
 ```
 
 ## Development

package/build/cjs/blocks/Banner/Banner.js

@@ -5,12 +5,17 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const Wrapper_1 = require("../../components/Wrapper/Wrapper");
-const constants_1 = require("../../constants");
 const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../counters/utils");
 const b = (0, cn_1.block)('banner');
 const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
+const buttonGoals = (0, common_1.prepareAnalyticsEvent)({
+    name: constants_1.DefaultGoalIds.bannerCommon,
+    counter: utils_1.AnalyticsCounter.CrossSite,
+});
 const Banner = (_a) => {
     var _b;
     var { color, imageSize = 's', image, paddingTop, paddingBottom, qa } = _a, content = tslib_1.__rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom", "qa"]);
@@ -20,16 +25,9 @@ const Banner = (_a) => {
         contentStyle.backgroundColor = color;
     }
     const contentData = (0, common_1.updateContentSizes)(content);
-    /**
-     * @deprecated Metrika will be deleted after launch of analyticsEvents
-     */
-    const metrikaGoal = {
-        name: constants_1.BlogMetrikaGoalIds.bannerCommon,
-        isCrossSite: true,
-    };
     (_b = contentData.buttons) === null || _b === void 0 ? void 0 : _b.forEach((button) => {
         // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
-        button.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, button.metrikaGoals);
+        button.analyticsEvents = (0, common_1.getMergedAnalyticsEvents)(buttonGoals, button.analyticsEvents);
     });
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,

package/build/cjs/blocks/CTA/CTA.js

@@ -5,19 +5,17 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const Wrapper_1 = require("../../components/Wrapper/Wrapper");
-const constants_1 = require("../../constants");
 const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../counters/utils");
 const b = (0, cn_1.block)('cta');
+const linkGoals = (0, common_1.prepareAnalyticsEvent)({
+    name: constants_1.DefaultGoalIds.cta,
+    counter: utils_1.AnalyticsCounter.CrossSite,
+});
 const CTA = ({ items, paddingTop, paddingBottom, qa }) => {
-    /**
-     * @deprecated Metrika will be deleted after launch of analyticsEvents
-     */
-    const metrikaGoal = {
-        name: constants_1.BlogMetrikaGoalIds.cta,
-        isCrossSite: true,
-    };
     const qaAttributes = (0, common_1.getQaAttributes)(qa, 'card');
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
@@ -27,7 +25,7 @@ const CTA = ({ items, paddingTop, paddingBottom, qa }) => {
         const contentData = (0, common_1.updateContentSizes)(content);
         (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
             // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
-            link.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, link.metrikaGoals);
+            link.analyticsEvents = (0, common_1.getMergedAnalyticsEvents)(linkGoals, link.analyticsEvents);
         });
         return (react_1.default.createElement("div", { key: index, className: b('card'), "data-qa": qaAttributes.card },
             react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData, { qa: qaAttributes.content }))));

package/build/cjs/blocks/Feed/Feed.js

@@ -4,9 +4,6 @@ exports.Feed = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
 const uikit_1 = require("@gravity-ui/uikit");
 const FeedHeader_1 = require("../../components/FeedHeader/FeedHeader");
 const Posts_1 = require("../../components/Posts/Posts");
@@ -14,10 +11,6 @@ const PostsError_1 = require("../../components/PostsError/PostsError");
 const constants_1 = require("../../constants");
 const FeedContext_1 = require("../../contexts/FeedContext");
 const RouterContext_1 = require("../../contexts/RouterContext");
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrika_1 = tslib_1.__importDefault(require("../../counters/metrika"));
 const utils_1 = require("../../counters/utils");
 const common_1 = require("../../models/common");
 const common_2 = require("../../utils/common");
@@ -31,6 +24,10 @@ const Feed = ({ image }) => {
     const { posts, totalCount, tags, services, pinnedPost, getPosts, pageCountForShowSupportButtons, } = (0, react_1.useContext)(FeedContext_1.FeedContext);
     const router = (0, react_1.useContext)(RouterContext_1.RouterContext);
     const handleAnalytics = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.ShowMore);
+    const additionalAnalyticsEvent = (0, common_2.prepareAnalyticsEvent)({
+        name: constants_1.DefaultGoalIds.showMore,
+        counter: utils_1.AnalyticsCounter.CrossSite,
+    });
     const [{ errorLoad, errorShowMore, isFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = (0, react_1.useReducer)(reducer_1.reducer, {
         errorLoad: false,
         errorShowMore: false,
@@ -56,12 +53,11 @@ const Feed = ({ image }) => {
         dispatch({ type: reducer_1.ActionTypes.SetErrorLoad, payload: value });
     };
     const handleChangeQueryParams = (0, react_1.useCallback)((value) => {
-        var _a;
         dispatch({ type: reducer_1.ActionTypes.QueryParamsChange, payload: value });
         const hasFirstPageQuery = Object.keys(value).some((queryKey) => queryKey === PAGE_QUERY && value[queryKey] === FIRST_PAGE);
         const result = hasFirstPageQuery
             ? Object.assign(Object.assign({}, value), { [PAGE_QUERY]: null }) : Object.assign({}, value);
-        (_a = router === null || router === void 0 ? void 0 : router.updateQueryCallback) === null || _a === void 0 ? void 0 : _a.call(router, result);
+        router.updateQueryCallback(result);
     }, [router]);
     const fetchData = (0, react_1.useCallback)(async ({ page, query }) => {
         if (query && getPosts) {
@@ -106,11 +102,7 @@ const Feed = ({ image }) => {
         });
     };
     const handleShowMore = async () => {
-        /**
-         * @deprecated Metrika will be deleted after launch of analyticsEvents
-         */
-        metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.showMore);
-        handleAnalytics();
+        handleAnalytics(additionalAnalyticsEvent);
         const nextPage = currentPage + 1;
         try {
             setIsFetching(true);

package/build/cjs/blocks/Header/Header.js

@@ -12,19 +12,15 @@ const PostPageContext_1 = require("../../contexts/PostPageContext");
 const paddings_1 = require("../../models/paddings");
 const common_1 = require("../../utils/common");
 const SettingsContext_1 = require("../../contexts/SettingsContext");
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrikaGoals = {
-    sharing: constants_1.BlogMetrikaGoalIds.shareTop,
-    save: constants_1.BlogMetrikaGoalIds.saveTop,
+const utils_1 = require("../../counters/utils");
+const analyticsEventsContainer = {
+    sharing: (0, common_1.prepareAnalyticsEvent)({ name: constants_1.DefaultGoalIds.shareTop }),
+    save: (0, common_1.prepareAnalyticsEvent)({ name: constants_1.DefaultGoalIds.saveTop }),
 };
-const breadcrumbsGoals = [
-    {
-        name: constants_1.BlogMetrikaGoalIds.breadcrumbsTop,
-        isCrossSite: true,
-    },
-];
+const breadcrumbsGoals = (0, common_1.prepareAnalyticsEvent)({
+    name: constants_1.DefaultGoalIds.breadcrumbsTop,
+    counter: utils_1.AnalyticsCounter.CrossSite,
+});
 const Header = (props) => {
     const { theme, paddingTop, paddingBottom } = props;
     const { post } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
@@ -36,12 +32,12 @@ const Header = (props) => {
     if (theme === 'dark' && breadcrumbs) {
         breadcrumbs.theme = 'dark';
     }
-    breadcrumbs.metrikaGoals = breadcrumbsGoals;
+    breadcrumbs.analyticsEvents = breadcrumbsGoals;
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
         } },
         react_1.default.createElement(page_constructor_1.HeaderBlock, Object.assign({}, props, { title: title, description: description, breadcrumbs: breadcrumbs }),
-            react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, qa: "blog-header-meta-container" }))));
+            react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, analyticsEventsContainer: analyticsEventsContainer, theme: theme, qa: "blog-header-meta-container" }))));
 };
 exports.Header = Header;

package/build/cjs/blocks/Media/Media.js

@@ -18,6 +18,7 @@ const Media = (_a) => {
             react_1.default.createElement(page_constructor_1.Media, Object.assign({ className: b('content'), videoClassName: b('video'), imageClassName: b('image') }, mediaProps))),
         text && (react_1.default.createElement("div", { className: b('text-content') },
             react_1.default.createElement(page_constructor_1.YFMWrapper, { content: text, modifiers: {
+                    blog: true,
                     blogMedia: true,
                     resetPaddings: true,
                 } })))));

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

@@ -13,20 +13,16 @@ const PostPageContext_1 = require("../../contexts/PostPageContext");
 const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
+const utils_1 = require("../../counters/utils");
 const b = (0, cn_1.block)('meta');
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrikaGoals = {
-    sharing: constants_1.BlogMetrikaGoalIds.shareBottom,
-    save: constants_1.BlogMetrikaGoalIds.saveBottom,
+const analyticsEventsContainer = {
+    sharing: (0, common_1.prepareAnalyticsEvent)({ name: constants_1.DefaultGoalIds.shareBottom }),
+    save: (0, common_1.prepareAnalyticsEvent)({ name: constants_1.DefaultGoalIds.saveBottom }),
 };
-const breadcrumbsGoals = [
-    {
-        name: constants_1.BlogMetrikaGoalIds.breadcrumbsBottom,
-        isCrossSite: true,
-    },
-];
+const breadcrumbsGoals = (0, common_1.prepareAnalyticsEvent)({
+    name: constants_1.DefaultGoalIds.breadcrumbsBottom,
+    counter: utils_1.AnalyticsCounter.CrossSite,
+});
 const Meta = (props) => {
     const { paddingTop = 'l', paddingBottom = 'l', theme = 'light', qa } = props;
     const { post } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
@@ -36,16 +32,16 @@ const Meta = (props) => {
     const blogPath = getBlogPath(locale.pathPrefix || '');
     const { title, id, date, readingTime, tags } = post;
     const breadcrumbs = (0, common_1.getBreadcrumbs)({ tags, blogPath });
-    breadcrumbs.metrikaGoals = breadcrumbsGoals;
+    breadcrumbs.analyticsEvents = (0, common_1.getMergedAnalyticsEvents)(breadcrumbsGoals);
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
         }, qa: qaAttributes.wrapper },
-        breadcrumbs && (react_1.default.createElement(page_constructor_1.HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
+        breadcrumbs && (react_1.default.createElement(page_constructor_1.HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme })),
         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: qaAttributes.postInfo }))));
+        post && (react_1.default.createElement(PostInfo_1.PostInfo, { postId: id, date: date, readingTime: readingTime, analyticsEventsContainer: analyticsEventsContainer, qa: qaAttributes.postInfo }))));
 };
 exports.Meta = Meta;

package/build/cjs/blocks/Suggest/Suggest.js

@@ -6,19 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const PostCard_1 = require("../../components/PostCard/PostCard");
 const Wrapper_1 = require("../../components/Wrapper/Wrapper");
-const constants_1 = require("../../constants");
 const PostPageContext_1 = require("../../contexts/PostPageContext");
 const i18n_1 = require("../../i18n");
 const paddings_1 = require("../../models/paddings");
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrikaGoals = [
-    {
-        name: constants_1.BlogMetrikaGoalIds.suggest,
-        isCrossSite: true,
-    },
-];
+const common_1 = require("../../utils/common");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../counters/utils");
+const suggestGoals = (0, common_1.prepareAnalyticsEvent)({
+    name: constants_1.DefaultGoalIds.suggest,
+    counter: utils_1.AnalyticsCounter.CrossSite,
+});
 /**
  * Suggested posts block
  *
@@ -37,6 +34,6 @@ const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
         } },
-        react_1.default.createElement(page_constructor_1.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18)(i18n_1.Keyset.TitleSuggest) }, lazyLoad: false }, suggestedPosts.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, metrikaGoals: metrikaGoals, post: post }))))));
+        react_1.default.createElement(page_constructor_1.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18n)(i18n_1.Keyset.TitleSuggest) }, lazyLoad: false }, suggestedPosts.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
 };
 exports.Suggest = Suggest;

package/build/cjs/components/FeedHeader/components/Controls/Controls.css

@@ -36,10 +36,10 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list::-webkit-scrollbar {
   display: none;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .yc-list {
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .g-list {
   max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
+.bc-feed-controls__popup.bc-feed-controls__popup .g-list__item {
   margin: 4px;
   border-radius: 8px;
 }
@@ -48,12 +48,28 @@ unpredictable css rules order in build */
   max-height: inherit;
 }
 
+.bc-feed-controls__popup_isMobile .bc-feed-controls__popup-filter {
+  position: relative;
+  border: none;
+}
+.bc-feed-controls__popup_isMobile .bc-feed-controls__popup-filter::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0px;
+  border-bottom: 2px solid var(--g-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  width: 100vw;
+  height: 2px;
+  transform: translateX(-50%);
+}
 .bc-feed-controls__popup-filter {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
   padding: 4px 12px;
   border: none;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -63,8 +79,6 @@ unpredictable css rules order in build */
 .bc-feed-controls__saved-only-button_savedOnly.bc-feed-controls__saved-only-button_savedOnly {
   --g-button-background-color: var(--pc-monochrome-button-background-color);
   --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
-  --yc-button-background-color: var(--pc-monochrome-button-background-color);
-  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
 }
 .bc-feed-controls__saved-only-button_savedOnly.bc-feed-controls__saved-only-button_savedOnly, .bc-feed-controls__saved-only-button_savedOnly.bc-feed-controls__saved-only-button_savedOnly:link, .bc-feed-controls__saved-only-button_savedOnly.bc-feed-controls__saved-only-button_savedOnly:visited, .bc-feed-controls__saved-only-button_savedOnly.bc-feed-controls__saved-only-button_savedOnly:active, .bc-feed-controls__saved-only-button_savedOnly.bc-feed-controls__saved-only-button_savedOnly:focus {
   color: var(--pc-monochrome-button-color);

package/build/cjs/components/FeedHeader/components/Controls/Controls.js

@@ -5,19 +5,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const uikit_1 = require("@gravity-ui/uikit");
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
 const constants_1 = require("../../../../constants");
 const LikesContext_1 = require("../../../../contexts/LikesContext");
 const MobileContext_1 = require("../../../../contexts/MobileContext");
-const metrika_1 = tslib_1.__importDefault(require("../../../../counters/metrika"));
 const utils_1 = require("../../../../counters/utils");
 const i18n_1 = require("../../../../i18n");
 const Save_1 = require("../../../../icons/Save");
 const common_1 = require("../../../../models/common");
 const cn_1 = require("../../../../utils/cn");
 const Search_1 = require("../../../Search/Search");
+const common_2 = require("../../../../utils/common");
 const customRenders_1 = require("./customRenders");
 const b = (0, cn_1.block)('feed-controls');
 const ICON_SIZE = 16;
@@ -54,13 +51,11 @@ const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) =>
         });
     };
     const handleTagSelect = (selectedTags) => {
-        /**
-         * @deprecated Metrika will be deleted after launch of analyticsEvents
-         */
-        metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.tag, {
-            theme: selectedTags[0],
+        const event = (0, common_2.prepareAnalyticsEvent)({
+            name: constants_1.DefaultGoalIds.tag,
+            counter: utils_1.AnalyticsCounter.CrossSite,
         });
-        handleAnalyticsTag(null, {
+        handleAnalyticsTag(event, {
             theme: selectedTags[0],
         });
         const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
@@ -73,18 +68,18 @@ const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) =>
         });
     };
     const handleServicesSelect = (selectedServices) => {
-        const forMetrikaServices = services.filter((service) => {
+        const forAnalyticsServices = services.filter((service) => {
             return selectedServices.includes(service.value);
         });
-        const metrikaAsString = forMetrikaServices.map((service) => service.content).join(',');
-        /**
-         * @deprecated Metrika will be deleted after launch of analyticsEvents
-         */
-        metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.service, {
-            service: metrikaAsString,
+        const servicesAsStringForAnalytics = forAnalyticsServices
+            .map((service) => service.content)
+            .join(',');
+        const event = (0, common_2.prepareAnalyticsEvent)({
+            name: constants_1.DefaultGoalIds.service,
+            counter: utils_1.AnalyticsCounter.CrossSite,
         });
-        handleAnalyticsService(null, {
-            service: metrikaAsString,
+        handleAnalyticsService(event, {
+            service: servicesAsStringForAnalytics,
         });
         const servicesAsString = selectedServices.join(',');
         handleLoadData({
@@ -92,28 +87,28 @@ const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) =>
             query: { services: servicesAsString, page: DEFAULT_PAGE },
         });
     };
-    const tagsItems = (0, react_1.useMemo)(() => [{ value: 'empty', content: (0, i18n_1.i18)(i18n_1.Keyset.AllTags) }, ...tags], [tags]);
+    const tagsItems = (0, react_1.useMemo)(() => [{ value: 'empty', content: (0, i18n_1.i18n)(i18n_1.Keyset.AllTags) }, ...tags], [tags]);
     const servicesItems = (0, react_1.useMemo)(() => (servicesInitial ? [...servicesInitial.split(',')] : []), [servicesInitial]);
     return (react_1.default.createElement("div", { className: b('header') },
-        react_1.default.createElement("h1", { className: b('header-item', { title: true }) }, (0, i18n_1.i18)(i18n_1.Keyset.Title)),
+        react_1.default.createElement("h1", { className: b('header-item', { title: true }) }, (0, i18n_1.i18n)(i18n_1.Keyset.Title)),
         react_1.default.createElement("div", { className: b('header-item', { filters: true }) },
             react_1.default.createElement("div", { className: b('filter-item') },
-                react_1.default.createElement(Search_1.Search, { className: b('search'), placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), initialValue: search && typeof search === 'string' ? search : '', onSubmit: handleSearch })),
+                react_1.default.createElement(Search_1.Search, { className: b('search'), placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.Search), initialValue: search && typeof search === 'string' ? search : '', onSubmit: handleSearch })),
             react_1.default.createElement("div", { className: b('filter-item') },
-                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", options: tagsItems, defaultValue: [tagInitial], onUpdate: handleTagSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllTags), popupClassName: b('popup', { isMobile }), renderControl: (0, customRenders_1.renderSwitcher)({
+                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", options: tagsItems, defaultValue: [tagInitial], onUpdate: handleTagSelect, placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.AllTags), popupClassName: b('popup', { isMobile }), renderControl: (0, customRenders_1.renderSwitcher)({
                         initial: [tagInitial],
                         list: tagsItems,
-                        defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllTags),
+                        defaultLabel: (0, i18n_1.i18n)(i18n_1.Keyset.AllTags),
                     }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption })),
             services.length > 0 ? (react_1.default.createElement("div", { className: b('filter-item') },
-                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", multiple: true, filterable: true, hasClear: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup', { isMobile }), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
+                react_1.default.createElement(uikit_1.Select, { className: b('select'), size: "xl", multiple: true, filterable: true, hasClear: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup', { isMobile }), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
                         initial: servicesItems,
                         list: services,
-                        defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllServices),
+                        defaultLabel: (0, i18n_1.i18n)(i18n_1.Keyset.AllServices),
                     }), virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption, renderFilter: customRenders_1.renderFilter }))) : null,
             hasLikes ? (react_1.default.createElement("div", { className: b('filter-item', { 'width-auto': true }) },
                 react_1.default.createElement(uikit_1.Button, { view: 'outlined', className: b('saved-only-button', { savedOnly }), size: "xl", onClick: handleSavedOnly },
                     react_1.default.createElement(uikit_1.Icon, { data: Save_1.Save, size: ICON_SIZE, className: b('icon', { savedOnly }) }),
-                    (0, i18n_1.i18)(i18n_1.Keyset.ActionSavedOnly)))) : null)));
+                    (0, i18n_1.i18n)(i18n_1.Keyset.ActionSavedOnly)))) : null)));
 };
 exports.Controls = Controls;

package/build/cjs/components/FeedHeader/components/Controls/customRenders.js

@@ -13,7 +13,7 @@ const renderSwitcher = ({ initial, list, defaultLabel }) =>
 // eslint-disable-next-line react/display-name
 ({ onClick, ref, onKeyDown, open, renderClear }) => (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, renderClear: renderClear, open: open }));
 exports.renderSwitcher = renderSwitcher;
-const renderFilter = ({ value, onChange, onKeyDown }) => (react_1.default.createElement(uikit_1.TextInput, { controlProps: { size: 1 }, value: value, view: "clear", placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
+const renderFilter = ({ value, onChange, onKeyDown }) => (react_1.default.createElement(uikit_1.TextInput, { controlProps: { size: 1 }, value: value, view: "clear", placeholder: (0, i18n_1.i18n)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
 exports.renderFilter = renderFilter;
 const renderOption = (option) => (react_1.default.createElement(CustomSelectOption_1.CustomSelectOption, { data: option }));
 exports.renderOption = renderOption;

package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css

@@ -24,7 +24,7 @@ unpredictable css rules order in build */
 .bc-feed-custom-switcher__custom-switcher:focus:not(:focus-visible) {
   outline: 0;
 }
-.bc-feed-custom-switcher__custom-switcher + .yc-popup.yc-popup_open {
+.bc-feed-custom-switcher__custom-switcher + .g-popup.g-popup_open {
   position: absolute !important;
   inset: auto !important;
   transform: translate3d(0, 4px, 0) !important;
@@ -70,6 +70,9 @@ unpredictable css rules order in build */
   position: absolute;
   inset: 0;
   border-radius: var(--g-border-radius-xl);
+  background: transparent;
+  border: none;
+  cursor: pointer;
 }
 .bc-feed-custom-switcher__switcher-arrow {
   width: 16px;

package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js

@@ -18,8 +18,8 @@ const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKe
         return items.length ? items : [defaultLabel];
     }, [defaultLabel, initial, list]);
     const hasCounter = itemsNames.length > 1;
-    return (react_1.default.createElement("button", { className: b('custom-switcher'), ref: controlRef, onKeyDown: onKeyDown, "aria-expanded": open },
-        react_1.default.createElement("div", { onClick: onClick, className: b('custom-switcher-element', { overlay: true }) }),
+    return (react_1.default.createElement("div", { className: b('custom-switcher'), ref: controlRef },
+        react_1.default.createElement("button", { onClick: onClick, className: b('custom-switcher-element', { overlay: true }), onKeyDown: onKeyDown, "aria-expanded": open }),
         react_1.default.createElement("div", { className: b('custom-switcher-element', { content: true }) }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
         renderClear &&
             renderClear({

package/build/cjs/components/Paginator/Paginator.js

@@ -5,10 +5,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const constants_1 = require("../../constants");
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrika_1 = tslib_1.__importDefault(require("../../counters/metrika"));
 const utils_1 = require("../../counters/utils");
 const common_1 = require("../../models/common");
 const cn_1 = require("../../utils/cn");
@@ -16,6 +12,7 @@ const NavigationButton_1 = require("./components/NavigationButton");
 const PaginatorItem_1 = require("./components/PaginatorItem");
 const types_1 = require("./types");
 const utils_2 = require("./utils");
+const common_2 = require("../../utils/common");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const b = (0, cn_1.block)('paginator');
 const DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS = 6;
@@ -39,19 +36,19 @@ const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, onPage
     const handleArrowClick = (type) => {
         let newPage = page;
         if (type === 'prev' && page > 1) {
-            /**
-             * @deprecated Metrika will be deleted after launch of analyticsEvents
-             */
-            metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.home);
-            handleAnalyticsHome();
+            const event = (0, common_2.prepareAnalyticsEvent)({
+                name: constants_1.DefaultGoalIds.home,
+                counter: utils_1.AnalyticsCounter.CrossSite,
+            });
+            handleAnalyticsHome(event);
             newPage = 1;
         }
         else if (type === 'next' && page < pagesCount) {
-            /**
-             * @deprecated Metrika will be deleted after launch of analyticsEvents
-             */
-            handleAnalyticsNext();
-            metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.next);
+            const event = (0, common_2.prepareAnalyticsEvent)({
+                name: constants_1.DefaultGoalIds.next,
+                counter: utils_1.AnalyticsCounter.CrossSite,
+            });
+            handleAnalyticsNext(event);
             newPage = page + 1;
         }
         if (newPage !== page) {
@@ -60,11 +57,11 @@ const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, onPage
     };
     const handlePageClick = (index) => {
         if (index !== page && typeof index === 'number') {
-            /**
-             * @deprecated Metrika will be deleted after launch of analyticsEvents
-             */
-            metrika_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.page, { page: index });
-            handleAnalyticsPage(null, { page: String(index) });
+            const event = (0, common_2.prepareAnalyticsEvent)({
+                name: constants_1.DefaultGoalIds.page,
+                counter: utils_1.AnalyticsCounter.CrossSite,
+            });
+            handleAnalyticsPage(event, { page: String(index) });
             handlePageChange(index);
         }
     };

package/build/cjs/components/Paginator/components/NavigationButton.js

@@ -7,5 +7,5 @@ const i18n_1 = require("../../../i18n");
 const cn_1 = require("../../../utils/cn");
 const types_1 = require("../types");
 const b = (0, cn_1.block)('paginator');
-const NavigationButton = ({ arrowType, disabled }) => disabled ? null : (react_1.default.createElement("div", { className: b('icon') }, arrowType === types_1.ArrowType.Prev ? (0, i18n_1.i18)(i18n_1.Keyset.ButtonBegin) : (0, i18n_1.i18)(i18n_1.Keyset.ButtonFarther)));
+const NavigationButton = ({ arrowType, disabled }) => disabled ? null : (react_1.default.createElement("div", { className: b('icon') }, arrowType === types_1.ArrowType.Prev ? (0, i18n_1.i18n)(i18n_1.Keyset.ButtonBegin) : (0, i18n_1.i18n)(i18n_1.Keyset.ButtonFarther)));
 exports.NavigationButton = NavigationButton;

package/build/cjs/components/PostCard/PostCard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MetrikaGoal } from '@gravity-ui/page-constructor';
+import { AnalyticsEventsProp } from '@gravity-ui/page-constructor';
 import { PostCardSize, PostCardTitleHeadingLevel, PostData } from '../../models/common';
 type PostCardProps = {
     post: PostData;
@@ -7,10 +7,7 @@ type PostCardProps = {
     showTag?: boolean;
     size?: PostCardSize;
     titleHeadingLevel?: PostCardTitleHeadingLevel;
-    /**
-     * @deprecated Metrika will be deleted after launch of analyticsEvents
-     */
-    metrikaGoals?: MetrikaGoal;
+    analyticsEvents?: AnalyticsEventsProp;
 };
-export declare const PostCard: ({ post, metrikaGoals, fullWidth, size, showTag, titleHeadingLevel, }: PostCardProps) => React.JSX.Element;
+export declare const PostCard: ({ post, fullWidth, size, showTag, titleHeadingLevel, analyticsEvents, }: PostCardProps) => React.JSX.Element;
 export {};

package/build/cjs/components/PostCard/PostCard.js

@@ -11,7 +11,7 @@ const cn_1 = require("../../utils/cn");
 const SuggestPostInfo_1 = require("../PostInfo/SuggestPostInfo");
 const useAriaAttributes_1 = require("../../hooks/useAriaAttributes");
 const b = (0, cn_1.block)('post-card');
-const PostCard = ({ post, metrikaGoals, fullWidth = false, size = common_1.PostCardSize.SMALL, showTag = false, titleHeadingLevel = common_1.PostCardTitleHeadingLevel.H3, }) => {
+const PostCard = ({ post, fullWidth = false, size = common_1.PostCardSize.SMALL, showTag = false, titleHeadingLevel = common_1.PostCardTitleHeadingLevel.H3, analyticsEvents, }) => {
     var _a;
     const { title: postTitle, htmlTitle, textTitle, blogPostId, id, date, readingTime, hasUserLike, likes, image, description, tags, url, } = post;
     const title = postTitle || textTitle || htmlTitle;
@@ -37,7 +37,7 @@ const PostCard = ({ post, metrikaGoals, fullWidth = false, size = common_1.PostC
             readingTime && readingTimeId,
         ],
     });
-    return (react_1.default.createElement(page_constructor_1.CardBase, { url: url, metrikaGoals: metrikaGoals, className: b('card', { fullWidth }), extraProps: ariaAttributes },
+    return (react_1.default.createElement(page_constructor_1.CardBase, { url: url, analyticsEvents: analyticsEvents, className: b('card', { fullWidth }), extraProps: ariaAttributes },
         react_1.default.createElement(page_constructor_1.CardBase.Header, { image: image, className: b('header', { fullWidth }) },
             react_1.default.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         react_1.default.createElement(page_constructor_1.CardBase.Content, null,

package/build/cjs/components/PostInfo/PostInfo.css

@@ -17,6 +17,14 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
 }
+.bc-post-info__item_save {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+}
 .bc-post-info__item:last-child {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);