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

package/build/cjs/utils/common.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getQaAttributes = exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getBlogElementMetrika = exports.isMetrikaExist = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
+exports.prepareAnalyticsEvent = exports.getQaAttributes = exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getMergedAnalyticsEvents = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
 const tslib_1 = require("tslib");
 const url_1 = require("url");
-const page_constructor_1 = require("@gravity-ui/page-constructor");
 const camelCase_1 = tslib_1.__importDefault(require("lodash/camelCase"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
 const memoize_1 = tslib_1.__importDefault(require("lodash/memoize"));
 const constants_1 = require("../blocks/constants");
 const i18n_1 = require("../i18n");
+const utils_1 = require("../counters/utils");
 const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 function getAbsolutePath(router, url) {
     if (!router || !router.pathname) {
@@ -62,7 +62,7 @@ const getBlogPath = (pathPrefix) => {
 exports.getBlogPath = getBlogPath;
 const getBreadcrumbs = ({ tags, blogPath }) => {
     const breadcrumbs = {
-        items: [{ text: (0, i18n_1.i18)(i18n_1.Keyset.TitleBreadcrumbs), url: blogPath }],
+        items: [{ text: (0, i18n_1.i18n)(i18n_1.Keyset.TitleBreadcrumbs), url: blogPath }],
         theme: 'light',
     };
     if (tags === null || tags === void 0 ? void 0 : tags.length) {
@@ -74,24 +74,21 @@ const getBreadcrumbs = ({ tags, blogPath }) => {
     return breadcrumbs;
 };
 exports.getBreadcrumbs = getBreadcrumbs;
-const isMetrikaExist = (goal, existGoals) => {
-    return Boolean(existGoals.find((existGoal) => goal.name === existGoal.name));
-};
-exports.isMetrikaExist = isMetrikaExist;
-const getBlogElementMetrika = (blogCustomGoal, existingGoals) => {
-    if (existingGoals) {
-        if ((0, page_constructor_1.isNewMetrikaFormat)(existingGoals) && !(0, exports.isMetrikaExist)(blogCustomGoal, existingGoals)) {
-            const goals = [...existingGoals];
-            goals.push(blogCustomGoal);
-            return goals;
-        }
-        return existingGoals;
+const getArrayOfEvents = (events) => {
+    if (!events) {
+        return [];
     }
-    else {
-        return [blogCustomGoal];
+    if (Array.isArray(events)) {
+        return events;
     }
+    return [events];
+};
+const getMergedAnalyticsEvents = (analyticEvents, existringEvents) => {
+    const eventsAsArray = getArrayOfEvents(analyticEvents);
+    const existingAsArray = getArrayOfEvents(existringEvents);
+    return eventsAsArray.concat(existingAsArray);
 };
-exports.getBlogElementMetrika = getBlogElementMetrika;
+exports.getMergedAnalyticsEvents = getMergedAnalyticsEvents;
 const getFeedQueryParams = (queryString, pageNumber) => {
     const queryParams = (0, exports.getPageSearchParams)(queryString);
     const tags = queryParams.get('tags') || undefined;
@@ -123,4 +120,8 @@ const getQaAttributes = (qa, ...customKeys) => {
     }
     return attributes;
 };
-exports.getQaAttributes = getQaAttributes;
+exports.getQaAttributes = getQaAttributes;
+const prepareAnalyticsEvent = ({ name, counter = utils_1.AnalyticsCounter.Main, options = {}, }) => (Object.assign(Object.assign({}, options), { name, counters: {
+        include: [counter],
+    } }));
+exports.prepareAnalyticsEvent = prepareAnalyticsEvent;

package/build/esm/blocks/Banner/Banner.js

@@ -2,13 +2,18 @@ import { __rest } from "tslib";
 import React from 'react';
 import { Content, Image } from '@gravity-ui/page-constructor';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
-import { BlogMetrikaGoalIds } from '../../constants';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { getBlogElementMetrika, getQaAttributes, updateContentSizes } from '../../utils/common';
+import { getMergedAnalyticsEvents, getQaAttributes, prepareAnalyticsEvent, updateContentSizes, } from '../../utils/common';
+import { DefaultGoalIds } from '../../constants';
+import { AnalyticsCounter } from '../../counters/utils';
 import './Banner.css';
 const b = block('banner');
 const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
+const buttonGoals = prepareAnalyticsEvent({
+    name: DefaultGoalIds.bannerCommon,
+    counter: AnalyticsCounter.CrossSite,
+});
 export const Banner = (_a) => {
     var _b;
     var { color, imageSize = 's', image, paddingTop, paddingBottom, qa } = _a, content = __rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom", "qa"]);
@@ -18,16 +23,9 @@ export const Banner = (_a) => {
         contentStyle.backgroundColor = color;
     }
     const contentData = updateContentSizes(content);
-    /**
-     * @deprecated Metrika will be deleted after launch of analyticsEvents
-     */
-    const metrikaGoal = {
-        name: 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 = getBlogElementMetrika(metrikaGoal, button.metrikaGoals);
+        button.analyticsEvents = getMergedAnalyticsEvents(buttonGoals, button.analyticsEvents);
     });
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,

package/build/esm/blocks/CTA/CTA.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import { Content } from '@gravity-ui/page-constructor';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
-import { BlogMetrikaGoalIds } from '../../constants';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { getBlogElementMetrika, getQaAttributes, updateContentSizes } from '../../utils/common';
+import { getMergedAnalyticsEvents, getQaAttributes, prepareAnalyticsEvent, updateContentSizes, } from '../../utils/common';
+import { DefaultGoalIds } from '../../constants';
+import { AnalyticsCounter } from '../../counters/utils';
 import './CTA.css';
 const b = block('cta');
+const linkGoals = prepareAnalyticsEvent({
+    name: DefaultGoalIds.cta,
+    counter: AnalyticsCounter.CrossSite,
+});
 export const CTA = ({ items, paddingTop, paddingBottom, qa }) => {
-    /**
-     * @deprecated Metrika will be deleted after launch of analyticsEvents
-     */
-    const metrikaGoal = {
-        name: BlogMetrikaGoalIds.cta,
-        isCrossSite: true,
-    };
     const qaAttributes = getQaAttributes(qa, 'card');
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
@@ -24,7 +22,7 @@ export const CTA = ({ items, paddingTop, paddingBottom, qa }) => {
         const contentData = 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 = getBlogElementMetrika(metrikaGoal, link.metrikaGoals);
+            link.analyticsEvents = getMergedAnalyticsEvents(linkGoals, link.analyticsEvents);
         });
         return (React.createElement("div", { key: index, className: b('card'), "data-qa": qaAttributes.card },
             React.createElement(Content, Object.assign({}, contentData, { qa: qaAttributes.content }))));

package/build/esm/blocks/Feed/Feed.js

@@ -1,22 +1,15 @@
 import React, { useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
 import { useAnalytics } from '@gravity-ui/page-constructor';
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
 import { Icon } from '@gravity-ui/uikit';
 import { FeedHeader } from '../../components/FeedHeader/FeedHeader';
 import { Posts } from '../../components/Posts/Posts';
 import { PostsError } from '../../components/PostsError/PostsError';
-import { BlogMetrikaGoalIds } from '../../constants';
+import { DefaultGoalIds } from '../../constants';
 import { FeedContext } from '../../contexts/FeedContext';
 import { RouterContext } from '../../contexts/RouterContext';
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-import metrika from '../../counters/metrika';
-import { MetrikaCounter } from '../../counters/utils';
+import { AnalyticsCounter } from '../../counters/utils';
 import { DefaultEventNames } from '../../models/common';
-import { getFeedQueryParams, scrollOnPageChange } from '../../utils/common';
+import { getFeedQueryParams, prepareAnalyticsEvent, scrollOnPageChange } from '../../utils/common';
 import { DEFAULT_PAGE, DEFAULT_ROWS_PER_PAGE } from '../constants';
 import { ActionTypes, reducer } from './reducer';
 const CONTAINER_ID = 'blog-cards';
@@ -27,6 +20,10 @@ export const Feed = ({ image }) => {
     const { posts, totalCount, tags, services, pinnedPost, getPosts, pageCountForShowSupportButtons, } = useContext(FeedContext);
     const router = useContext(RouterContext);
     const handleAnalytics = useAnalytics(DefaultEventNames.ShowMore);
+    const additionalAnalyticsEvent = prepareAnalyticsEvent({
+        name: DefaultGoalIds.showMore,
+        counter: AnalyticsCounter.CrossSite,
+    });
     const [{ errorLoad, errorShowMore, isFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = useReducer(reducer, {
         errorLoad: false,
         errorShowMore: false,
@@ -52,12 +49,11 @@ export const Feed = ({ image }) => {
         dispatch({ type: ActionTypes.SetErrorLoad, payload: value });
     };
     const handleChangeQueryParams = useCallback((value) => {
-        var _a;
         dispatch({ type: 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 = useCallback(async ({ page, query }) => {
         if (query && getPosts) {
@@ -102,11 +98,7 @@ export const Feed = ({ image }) => {
         });
     };
     const handleShowMore = async () => {
-        /**
-         * @deprecated Metrika will be deleted after launch of analyticsEvents
-         */
-        metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.showMore);
-        handleAnalytics();
+        handleAnalytics(additionalAnalyticsEvent);
         const nextPage = currentPage + 1;
         try {
             setIsFetching(true);

package/build/esm/blocks/Header/Header.js

@@ -2,25 +2,21 @@ import React, { useContext } from 'react';
 import { HeaderBlock } from '@gravity-ui/page-constructor';
 import { PostInfo } from '../../components/PostInfo/PostInfo';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
-import { BlogMetrikaGoalIds } from '../../constants';
+import { DefaultGoalIds } from '../../constants';
 import { LocaleContext } from '../../contexts/LocaleContext';
 import { PostPageContext } from '../../contexts/PostPageContext';
 import { PaddingsDirections } from '../../models/paddings';
-import { getBreadcrumbs, getBlogPath as getDefaultBlogPath } from '../../utils/common';
+import { getBreadcrumbs, getBlogPath as getDefaultBlogPath, prepareAnalyticsEvent, } from '../../utils/common';
 import { SettingsContext } from '../../contexts/SettingsContext';
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrikaGoals = {
-    sharing: BlogMetrikaGoalIds.shareTop,
-    save: BlogMetrikaGoalIds.saveTop,
+import { AnalyticsCounter } from '../../counters/utils';
+const analyticsEventsContainer = {
+    sharing: prepareAnalyticsEvent({ name: DefaultGoalIds.shareTop }),
+    save: prepareAnalyticsEvent({ name: DefaultGoalIds.saveTop }),
 };
-const breadcrumbsGoals = [
-    {
-        name: BlogMetrikaGoalIds.breadcrumbsTop,
-        isCrossSite: true,
-    },
-];
+const breadcrumbsGoals = prepareAnalyticsEvent({
+    name: DefaultGoalIds.breadcrumbsTop,
+    counter: AnalyticsCounter.CrossSite,
+});
 export const Header = (props) => {
     const { theme, paddingTop, paddingBottom } = props;
     const { post } = useContext(PostPageContext);
@@ -32,11 +28,11 @@ export const Header = (props) => {
     if (theme === 'dark' && breadcrumbs) {
         breadcrumbs.theme = 'dark';
     }
-    breadcrumbs.metrikaGoals = breadcrumbsGoals;
+    breadcrumbs.analyticsEvents = breadcrumbsGoals;
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
         } },
         React.createElement(HeaderBlock, Object.assign({}, props, { title: title, description: description, breadcrumbs: breadcrumbs }),
-            React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, qa: "blog-header-meta-container" }))));
+            React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, analyticsEventsContainer: analyticsEventsContainer, theme: theme, qa: "blog-header-meta-container" }))));
 };

package/build/esm/blocks/Media/Media.js

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

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

@@ -2,28 +2,24 @@ import React, { useContext } from 'react';
 import { HeaderBreadcrumbs, YFMWrapper } from '@gravity-ui/page-constructor';
 import { PostInfo } from '../../components/PostInfo/PostInfo';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
-import { BlogMetrikaGoalIds } from '../../constants';
+import { DefaultGoalIds } from '../../constants';
 import { LocaleContext } from '../../contexts/LocaleContext';
 import { SettingsContext } from '../../contexts/SettingsContext';
 import { PostPageContext } from '../../contexts/PostPageContext';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { getBreadcrumbs, getBlogPath as getDefaultBlogPath, getQaAttributes, } from '../../utils/common';
+import { getBreadcrumbs, getBlogPath as getDefaultBlogPath, getMergedAnalyticsEvents, getQaAttributes, prepareAnalyticsEvent, } from '../../utils/common';
+import { AnalyticsCounter } from '../../counters/utils';
 import './Meta.css';
 const b = block('meta');
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrikaGoals = {
-    sharing: BlogMetrikaGoalIds.shareBottom,
-    save: BlogMetrikaGoalIds.saveBottom,
+const analyticsEventsContainer = {
+    sharing: prepareAnalyticsEvent({ name: DefaultGoalIds.shareBottom }),
+    save: prepareAnalyticsEvent({ name: DefaultGoalIds.saveBottom }),
 };
-const breadcrumbsGoals = [
-    {
-        name: BlogMetrikaGoalIds.breadcrumbsBottom,
-        isCrossSite: true,
-    },
-];
+const breadcrumbsGoals = prepareAnalyticsEvent({
+    name: DefaultGoalIds.breadcrumbsBottom,
+    counter: AnalyticsCounter.CrossSite,
+});
 export const Meta = (props) => {
     const { paddingTop = 'l', paddingBottom = 'l', theme = 'light', qa } = props;
     const { post } = useContext(PostPageContext);
@@ -33,15 +29,15 @@ export const Meta = (props) => {
     const blogPath = getBlogPath(locale.pathPrefix || '');
     const { title, id, date, readingTime, tags } = post;
     const breadcrumbs = getBreadcrumbs({ tags, blogPath });
-    breadcrumbs.metrikaGoals = breadcrumbsGoals;
+    breadcrumbs.analyticsEvents = getMergedAnalyticsEvents(breadcrumbsGoals);
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
         }, qa: qaAttributes.wrapper },
-        breadcrumbs && (React.createElement(HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
+        breadcrumbs && (React.createElement(HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme })),
         title && (React.createElement(YFMWrapper, { content: title, modifiers: {
                 blogBreadcrumbs: true,
                 resetPaddings: true,
             } })),
-        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: qaAttributes.postInfo }))));
+        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, analyticsEventsContainer: analyticsEventsContainer, qa: qaAttributes.postInfo }))));
 };

package/build/esm/blocks/Suggest/Suggest.js

@@ -2,19 +2,16 @@ import React, { useContext } from 'react';
 import { SliderBlock } from '@gravity-ui/page-constructor';
 import { PostCard } from '../../components/PostCard/PostCard';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
-import { BlogMetrikaGoalIds } from '../../constants';
 import { PostPageContext } from '../../contexts/PostPageContext';
-import { Keyset, i18 } from '../../i18n';
+import { Keyset, i18n } from '../../i18n';
 import { PaddingsDirections } from '../../models/paddings';
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-const metrikaGoals = [
-    {
-        name: BlogMetrikaGoalIds.suggest,
-        isCrossSite: true,
-    },
-];
+import { prepareAnalyticsEvent } from '../../utils/common';
+import { DefaultGoalIds } from '../../constants';
+import { AnalyticsCounter } from '../../counters/utils';
+const suggestGoals = prepareAnalyticsEvent({
+    name: DefaultGoalIds.suggest,
+    counter: AnalyticsCounter.CrossSite,
+});
 /**
  * Suggested posts block
  *
@@ -33,5 +30,5 @@ export const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
         } },
-        React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18(Keyset.TitleSuggest) }, lazyLoad: false }, suggestedPosts.map((post) => (React.createElement(PostCard, { key: post.id, metrikaGoals: metrikaGoals, post: post }))))));
+        React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18n(Keyset.TitleSuggest) }, lazyLoad: false }, suggestedPosts.map((post) => (React.createElement(PostCard, { key: post.id, analyticsEvents: suggestGoals, post: post }))))));
 };

package/build/esm/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/esm/components/FeedHeader/components/Controls/Controls.js

@@ -1,19 +1,16 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { useAnalytics } from '@gravity-ui/page-constructor';
 import { Button, Icon, Select } from '@gravity-ui/uikit';
-/**
- * @deprecated Metrika will be deleted after launch of analyticsEvents
- */
-import { BlogMetrikaGoalIds } from '../../../../constants';
+import { DefaultGoalIds } from '../../../../constants';
 import { LikesContext } from '../../../../contexts/LikesContext';
 import { MobileContext } from '../../../../contexts/MobileContext';
-import metrika from '../../../../counters/metrika';
-import { MetrikaCounter } from '../../../../counters/utils';
-import { Keyset, i18 } from '../../../../i18n';
+import { AnalyticsCounter } from '../../../../counters/utils';
+import { Keyset, i18n } from '../../../../i18n';
 import { Save } from '../../../../icons/Save';
 import { DefaultEventNames } from '../../../../models/common';
 import { block } from '../../../../utils/cn';
 import { Search } from '../../../Search/Search';
+import { prepareAnalyticsEvent } from '../../../../utils/common';
 import { renderFilter, renderOption, renderSwitcher } from './customRenders';
 import './Controls.css';
 const b = block('feed-controls');
@@ -51,13 +48,11 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
         });
     };
     const handleTagSelect = (selectedTags) => {
-        /**
-         * @deprecated Metrika will be deleted after launch of analyticsEvents
-         */
-        metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.tag, {
-            theme: selectedTags[0],
+        const event = prepareAnalyticsEvent({
+            name: DefaultGoalIds.tag,
+            counter: AnalyticsCounter.CrossSite,
         });
-        handleAnalyticsTag(null, {
+        handleAnalyticsTag(event, {
             theme: selectedTags[0],
         });
         const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
@@ -70,18 +65,18 @@ export 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.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.service, {
-            service: metrikaAsString,
+        const servicesAsStringForAnalytics = forAnalyticsServices
+            .map((service) => service.content)
+            .join(',');
+        const event = prepareAnalyticsEvent({
+            name: DefaultGoalIds.service,
+            counter: AnalyticsCounter.CrossSite,
         });
-        handleAnalyticsService(null, {
-            service: metrikaAsString,
+        handleAnalyticsService(event, {
+            service: servicesAsStringForAnalytics,
         });
         const servicesAsString = selectedServices.join(',');
         handleLoadData({
@@ -89,27 +84,27 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
             query: { services: servicesAsString, page: DEFAULT_PAGE },
         });
     };
-    const tagsItems = useMemo(() => [{ value: 'empty', content: i18(Keyset.AllTags) }, ...tags], [tags]);
+    const tagsItems = useMemo(() => [{ value: 'empty', content: i18n(Keyset.AllTags) }, ...tags], [tags]);
     const servicesItems = useMemo(() => (servicesInitial ? [...servicesInitial.split(',')] : []), [servicesInitial]);
     return (React.createElement("div", { className: b('header') },
-        React.createElement("h1", { className: b('header-item', { title: true }) }, i18(Keyset.Title)),
+        React.createElement("h1", { className: b('header-item', { title: true }) }, i18n(Keyset.Title)),
         React.createElement("div", { className: b('header-item', { filters: true }) },
             React.createElement("div", { className: b('filter-item') },
-                React.createElement(Search, { className: b('search'), placeholder: i18(Keyset.Search), initialValue: search && typeof search === 'string' ? search : '', onSubmit: handleSearch })),
+                React.createElement(Search, { className: b('search'), placeholder: i18n(Keyset.Search), initialValue: search && typeof search === 'string' ? search : '', onSubmit: handleSearch })),
             React.createElement("div", { className: b('filter-item') },
-                React.createElement(Select, { className: b('select'), size: "xl", options: tagsItems, defaultValue: [tagInitial], onUpdate: handleTagSelect, placeholder: i18(Keyset.AllTags), popupClassName: b('popup', { isMobile }), renderControl: renderSwitcher({
+                React.createElement(Select, { className: b('select'), size: "xl", options: tagsItems, defaultValue: [tagInitial], onUpdate: handleTagSelect, placeholder: i18n(Keyset.AllTags), popupClassName: b('popup', { isMobile }), renderControl: renderSwitcher({
                         initial: [tagInitial],
                         list: tagsItems,
-                        defaultLabel: i18(Keyset.AllTags),
+                        defaultLabel: i18n(Keyset.AllTags),
                     }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: renderOption })),
             services.length > 0 ? (React.createElement("div", { className: b('filter-item') },
-                React.createElement(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: i18(Keyset.AllServices), renderControl: renderSwitcher({
+                React.createElement(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: i18n(Keyset.AllServices), renderControl: renderSwitcher({
                         initial: servicesItems,
                         list: services,
-                        defaultLabel: i18(Keyset.AllServices),
+                        defaultLabel: i18n(Keyset.AllServices),
                     }), virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: renderOption, renderFilter: renderFilter }))) : null,
             hasLikes ? (React.createElement("div", { className: b('filter-item', { 'width-auto': true }) },
                 React.createElement(Button, { view: 'outlined', className: b('saved-only-button', { savedOnly }), size: "xl", onClick: handleSavedOnly },
                     React.createElement(Icon, { data: Save, size: ICON_SIZE, className: b('icon', { savedOnly }) }),
-                    i18(Keyset.ActionSavedOnly)))) : null)));
+                    i18n(Keyset.ActionSavedOnly)))) : null)));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput } from '@gravity-ui/uikit';
-import { Keyset, i18 } from '../../../../i18n';
+import { Keyset, i18n } from '../../../../i18n';
 import { block } from '../../../../utils/cn';
 import { CustomSelectOption, } from '../CustomSelectOption/CustomSelectOption';
 import { CustomSwitcher } from '../CustomSwitcher/CustomSwitcher';
@@ -9,5 +9,5 @@ const b = block('feed-controls');
 export const renderSwitcher = ({ initial, list, defaultLabel }) => 
 // eslint-disable-next-line react/display-name
 ({ onClick, ref, onKeyDown, open, renderClear }) => (React.createElement(CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, renderClear: renderClear, open: open }));
-export const renderFilter = ({ value, onChange, onKeyDown }) => (React.createElement(TextInput, { controlProps: { size: 1 }, value: value, view: "clear", placeholder: i18(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
+export const renderFilter = ({ value, onChange, onKeyDown }) => (React.createElement(TextInput, { controlProps: { size: 1 }, value: value, view: "clear", placeholder: i18n(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
 export const renderOption = (option) => (React.createElement(CustomSelectOption, { data: option }));

package/build/esm/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/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js

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