@gravity-ui/blog-constructor 1.0.0-aplha.0

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

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Suggest = void 0;
+const react_1 = __importStar(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const i18n_1 = require("../../i18n");
+const Wrapper_1 = require("../../components/Wrapper/Wrapper");
+const PostCard_1 = require("../../components/PostCard/PostCard");
+const paddings_1 = require("../../models/paddings");
+const PostPageContext_1 = require("../../contexts/PostPageContext");
+const constants_1 = require("../../constants");
+const metrikaGoals = [
+    {
+        name: constants_1.BlogMetrikaGoalIds.suggest,
+        isCrossSite: true,
+    },
+];
+/**
+ * Suggested posts block
+ *
+ * @param posts - suggested posts list
+ * @param paddingTop - padding top code
+ * @param paddingBottom - padding bottom code
+ *
+ * @returns -jsx
+ */
+const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
+    const { suggestedPosts } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
+    if (suggestedPosts.length === 0) {
+        return null;
+    }
+    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.SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: (0, i18n_1.i18)(i18n_1.Keyset.TitleSuggest) } }, suggestedPosts.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, metrikaGoals: metrikaGoals, post: post }))))));
+};
+exports.Suggest = Suggest;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { YFMProps } from '../../models/blocks';
+export declare const YFM: React.FC<YFMProps>;

package/build/cjs/blocks/YFM/YFM.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YFM = void 0;
+const react_1 = __importDefault(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const bem_cn_lite_1 = __importDefault(require("bem-cn-lite"));
+const Wrapper_1 = require("../../components/Wrapper/Wrapper");
+const paddings_1 = require("../../models/paddings");
+const b = (0, bem_cn_lite_1.default)('yfm');
+const YFM = (props) => {
+    const { text, paddingTop, paddingBottom } = props;
+    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.YFMWrapper, { content: text, modifiers: {
+                blog: true,
+                resetPaddings: true,
+            }, className: b({ 'no-list-reset': true }) })));
+};
+exports.YFM = YFM;

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

@@ -0,0 +1,8 @@
+export declare const CONTENT_DEFAULT_SIZE = "s";
+export declare const CONTENT_DEFAULT_COL_SIZES: {
+    all: number;
+    md: number;
+};
+export declare const CONTENT_DEFAULT_THEME = "default";
+export declare const DEFAULT_PAGE = 1;
+export declare const DEFAULT_ROWS_PER_PAGE = 12;

package/build/cjs/blocks/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ROWS_PER_PAGE = exports.DEFAULT_PAGE = exports.CONTENT_DEFAULT_THEME = exports.CONTENT_DEFAULT_COL_SIZES = exports.CONTENT_DEFAULT_SIZE = void 0;
+exports.CONTENT_DEFAULT_SIZE = 's';
+exports.CONTENT_DEFAULT_COL_SIZES = { all: 12, md: 12 };
+exports.CONTENT_DEFAULT_THEME = 'default';
+exports.DEFAULT_PAGE = 1;
+exports.DEFAULT_ROWS_PER_PAGE = 12;

package/build/cjs/components/ButtonWithIcon/ButtonWithIcon.css

@@ -0,0 +1,76 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-button-with-icon {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+}
+.utilityfocus .bc-button-with-icon:focus {
+  outline: 2px solid #ffdb4d;
+}
+.bc-button-with-icon_size_xs {
+  height: 24px;
+  width: 24px;
+}
+.bc-button-with-icon_size_s {
+  height: 28px;
+  width: 28px;
+}
+.bc-button-with-icon_size_m {
+  height: 32px;
+  width: 32px;
+}
+.bc-button-with-icon_size_n {
+  height: 36px;
+  width: 36px;
+}
+.bc-button-with-icon_theme_primary {
+  color: var(--www-text-content-color);
+  transition: color 0.2s;
+}
+.bc-button-with-icon_theme_primary:hover {
+  color: var(--yc-color-text-primary);
+}
+.bc-button-with-icon_theme_secondary {
+  color: var(--yc-color-text-secondary);
+  transition: color 0.2s;
+}
+.bc-button-with-icon_theme_secondary:hover {
+  color: var(--www-text-content-color);
+}
+.bc-button-with-icon_theme_link {
+  color: var(--www-text-content-color);
+  transition: color 0.2s;
+}
+.bc-button-with-icon_theme_link:hover {
+  color: var(--yc-color-text-link-hover);
+}
+.bc-button-with-icon_theme_accent {
+  color: var(--yc-color-text-yandex-red);
+  transition: opacity 0.2s;
+  opacity: 0.7;
+}
+.bc-button-with-icon_theme_accent:hover {
+  opacity: 1;
+}
+.bc-button-with-icon_disabled {
+  cursor: default;
+  color: var(--yc-color-text-secondary);
+}
+.bc-button-with-icon_disabled:hover {
+  color: var(--yc-color-text-secondary);
+}
+.mobile .bc-button-with-icon:hover {
+  color: inherit;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SVGIconData } from '@gravity-ui/uikit/build/esm/components/Icon/types';
+import { ClassNameProps } from '../../models/common';
+export interface ButtonWithIconProps extends ClassNameProps {
+    icon: SVGIconData;
+    theme?: 'primary' | 'secondary' | 'link' | 'accent';
+    size?: 'xs' | 's' | 'm' | 'n';
+    iconSize?: number;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export declare const ButtonWithIcon: React.FC<ButtonWithIconProps>;

package/build/cjs/components/ButtonWithIcon/ButtonWithIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonWithIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('button-with-icon');
+const ButtonWithIcon = ({ icon, theme = 'primary', size = 's', iconSize = 16, disabled = false, onClick, className, }) => (react_1.default.createElement("button", { type: "button", className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
+    react_1.default.createElement(uikit_1.Icon, { data: icon, size: iconSize })));
+exports.ButtonWithIcon = ButtonWithIcon;

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

@@ -0,0 +1,54 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-feed-header {
+  margin-top: 16px;
+}
+.bc-feed-header__header {
+  padding: 16px 0;
+}
+.bc-feed-header__content {
+  position: relative;
+  height: 100%;
+  padding-bottom: 0;
+}
+.bc-feed-header__content_offset_large {
+  padding: calc(128px - 96px) 0 16px;
+  margin-bottom: -48px;
+}
+.bc-feed-header__content_theme_dark.bc-feed-header__content_theme_dark .bc-feed-header__title,
+.bc-feed-header__content_theme_dark.bc-feed-header__content_theme_dark .bc-feed-header__description * {
+  color: var(--yc-color-text-light-primary);
+}
+
+.bc-feed-header_has-background {
+  height: calc(100% + 96px);
+}
+.bc-feed-header__content {
+  position: relative;
+  z-index: 10;
+}
+.bc-feed-header__background, .bc-feed-header__background-media {
+  z-index: 5;
+}
+.bc-feed-header__background {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1440px;
+  transform: translateX(-50%);
+  max-width: 100vw;
+  height: 100%;
+  border-radius: var(--bc-border-radius);
+}
+@media (max-width: 769px) {
+  .bc-feed-header_has-background .bc-feed-header__background-img {
+    display: none;
+  }
+  .bc-feed-header_has-background .bc-feed-header__content_vertical-offset_s, .bc-feed-header_has-background .bc-feed-header__content_vertical-offset_m, .bc-feed-header_has-background .bc-feed-header__content_vertical-offset_l, .bc-feed-header_has-background .bc-feed-header__content_vertical-offset_xl {
+    padding: calc(96px - 16px) 0;
+  }
+}
+.mobile .bc-feed-header_has-background .bc-feed-header__title {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HeaderBlockProps, ClassNameProps } from '../../models/common';
+import { ControlsProps } from './components/Controls/Controls';
+type HeaderProps = Pick<HeaderBlockProps, 'background' | 'offset' | 'theme' | 'verticalOffset'>;
+type FeedHeaderProps = HeaderProps & ControlsProps;
+type FeedHeaderContainerProps = FeedHeaderProps & ClassNameProps;
+export declare const FeedHeader: React.FC<FeedHeaderContainerProps>;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const Controls_1 = require("./components/Controls/Controls");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('feed-header');
+const FeedHeader = ({ tags, services, setIsFetching, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, handleChangeQuery, queryParams, }) => {
+    const backgroundThemed = background && (0, page_constructor_1.getThemedValue)(background, theme);
+    return (react_1.default.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
+        (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (react_1.default.createElement(page_constructor_1.FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,
+        react_1.default.createElement(page_constructor_1.Grid, { className: b('content', { offset, theme, 'vertical-offset': verticalOffset }) },
+            backgroundThemed ? (react_1.default.createElement(page_constructor_1.BackgroundImage, { src: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.url, className: b('background'), imageClassName: b('background-img'), style: {
+                    backgroundColor: backgroundThemed.fullWidth
+                        ? ''
+                        : backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color,
+                }, disableCompress: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.disableCompress })) : null,
+            react_1.default.createElement(Controls_1.Controls, { tags: tags, services: services, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQuery, queryParams: queryParams }))));
+};
+exports.FeedHeader = FeedHeader;

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

@@ -0,0 +1,107 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-feed-controls__header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--bc-border-radius);
+  padding-bottom: 20px;
+  z-index: 10;
+}
+.bc-feed-controls__header-item {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.bc-feed-controls__header-item_title {
+  font-size: var(--yc-text-display-4-font-size);
+  line-height: var(--yc-text-display-4-line-height);
+  padding-top: 112px;
+  padding-bottom: 96px;
+}
+.bc-feed-controls__search {
+  background-color: var(--yc-color-base-background);
+  border-radius: 10px;
+  width: 100%;
+  max-width: 100%;
+}
+.bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
+  border-color: var(--yc-color-base-background);
+}
+.bc-feed-controls__select {
+  background-color: var(--yc-color-base-background);
+  border-radius: 10px;
+  width: 100%;
+}
+.bc-feed-controls__popup.bc-feed-controls__popup {
+  border-radius: 12px;
+}
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list {
+  max-height: 350px !important;
+  margin-top: 0;
+}
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list::-webkit-scrollbar {
+  display: none;
+}
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
+  margin: 4px;
+  border-radius: 8px;
+}
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter {
+  margin-top: 4px;
+  padding: 4px;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter .yc-text-input__control.yc-text-input__control_type_input {
+  border: none;
+}
+
+.bc-feed-controls__popup-filter .yc-text-input__control {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  border: none;
+}
+.bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
+  border: none;
+}
+.bc-feed-controls__select:hover {
+  background-color: var(--yc-color-base-background);
+  width: 100%;
+}
+.bc-feed-controls__saved-only-button {
+  border-radius: 10px;
+}
+.bc-feed-controls__saved-only-button_savedOnly {
+  --yc-button-background-color: var(--pc-monochrome-button);
+  --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
+  color: var(--yc-color-text-light-primary);
+}
+.bc-feed-controls__saved-only-button_savedOnly:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-feed-controls__saved-only-button_savedOnly:focus {
+  color: var(--yc-color-base-background);
+}
+.bc-feed-controls__filter-item {
+  margin-right: 8px;
+  margin-left: 8px;
+  margin-bottom: 12px;
+  min-width: 230px;
+  flex-grow: 1;
+}
+@media (min-width: 577px) {
+  .bc-feed-controls__filter-item {
+    max-width: 240px;
+  }
+}
+.bc-feed-controls__filter-item_width-auto {
+  width: auto;
+  min-width: auto;
+  flex-grow: 0;
+}
+.bc-feed-controls__icon {
+  color: var(--yc-my-color-brand-normal);
+}
+.bc-feed-controls__icon_savedOnly {
+  color: var(--yc-color-base-background);
+}

package/build/cjs/components/FeedHeader/components/Controls/Controls.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { HandleChangeQueryParams, SetQueryType, Query } from '../../../../models/common';
+export type SelectItem = {
+    content: string;
+    value: string;
+    icon?: ReactNode;
+};
+export type ControlsProps = {
+    setIsFetching: (value: boolean) => void;
+    tags?: SelectItem[];
+    services?: SelectItem[];
+    handleChangeQuery: HandleChangeQueryParams;
+    queryParams: Query;
+    setQuery?: SetQueryType;
+};
+export declare const Controls: React.FC<ControlsProps>;

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

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Controls = void 0;
+const react_1 = __importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const Search_1 = require("../../../Search/Search");
+const customRenders_1 = require("./customRenders");
+const LikesContext_1 = require("../../../../contexts/LikesContext");
+const constants_1 = require("../../../../constants");
+const metrika_js_1 = __importDefault(require("../../../../counters/metrika.js"));
+const utils_1 = require("../../../../counters/utils");
+const Save_1 = require("../../../../icons/Save");
+const i18n_1 = require("../../../../i18n");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('feed-controls');
+const ICON_SIZE = 16;
+const DEFAULT_PAGE = 1;
+const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery, queryParams, }) => {
+    const { hasLikes } = (0, react_1.useContext)(LikesContext_1.LikesContext);
+    const { savedOnly: savedOnlyInitial, search: searchInitial, tags: tagInitial, services: servicesInitial, } = queryParams || {};
+    const [savedOnly, setSavedOnly] = (0, react_1.useState)(savedOnlyInitial === 'true');
+    const [search, setSearch] = (0, react_1.useState)(searchInitial);
+    const handleSavedOnly = () => {
+        handleChangeQuery({ savedOnly: savedOnly ? '' : 'true' });
+        setSavedOnly(!savedOnly);
+        setIsFetching(true);
+    };
+    const handleSearch = (searchValue) => {
+        handleChangeQuery({ search: searchValue, page: DEFAULT_PAGE });
+        setSearch(searchValue);
+        setIsFetching(true);
+    };
+    const handleTagSelect = (selectedTags) => {
+        metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.tag, {
+            theme: selectedTags[0],
+        });
+        const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
+        handleChangeQuery({
+            tags: isEmptyTag ? '' : selectedTags[0],
+            page: DEFAULT_PAGE,
+        });
+        setIsFetching(true);
+    };
+    const handleServicesSelect = (selectedServices) => {
+        const forMetrikaServices = services.filter((service) => {
+            return selectedServices.includes(service.value);
+        });
+        const metrikaAsString = forMetrikaServices.map((service) => service.content).join(',');
+        metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.service, {
+            service: metrikaAsString,
+        });
+        const servicesAsString = selectedServices.join(',');
+        handleChangeQuery({ services: servicesAsString, page: DEFAULT_PAGE });
+        setIsFetching(true);
+    };
+    const tagsItems = (0, react_1.useMemo)(() => [{ value: 'empty', content: (0, i18n_1.i18)(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("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("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'), renderControl: (0, customRenders_1.renderSwitcher)({
+                        initial: [tagInitial],
+                        list: tagsItems,
+                        defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllTags),
+                    }), 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, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.AllServices), renderControl: (0, customRenders_1.renderSwitcher)({
+                        initial: servicesItems,
+                        list: services,
+                        defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllServices),
+                    }), disablePortal: true, 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)));
+};
+exports.Controls = Controls;

package/build/cjs/components/FeedHeader/components/Controls/customRenders.d.ts

@@ -0,0 +1,11 @@
+import { SelectProps, SelectOption } from '@gravity-ui/uikit';
+import { CustomSwitcherProps } from '../CustomSwitcher/CustomSwitcher';
+type RenderSwitcherType = ({ initial, list, defaultLabel, }: {
+    initial: CustomSwitcherProps['initial'];
+    list: CustomSwitcherProps['list'];
+    defaultLabel: string;
+}) => SelectProps['renderControl'];
+export declare const renderSwitcher: RenderSwitcherType;
+export declare const renderFilter: SelectProps['renderFilter'];
+export declare const renderOption: (option: SelectOption) => JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderOption = exports.renderFilter = exports.renderSwitcher = void 0;
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const i18n_1 = require("../../../../i18n");
+const cn_1 = require("../../../../utils/cn");
+const CustomSwitcher_1 = require("../CustomSwitcher/CustomSwitcher");
+const CustomSelectOption_1 = require("../CustomSelectOption/CustomSelectOption");
+const b = (0, cn_1.block)('feed-controls');
+const renderSwitcher = ({ initial, list, defaultLabel }) => 
+// eslint-disable-next-line react/display-name
+({ onClick, ref }) => (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
+exports.renderSwitcher = renderSwitcher;
+const renderFilter = ({ value, ref, onChange, onKeyDown }) => (react_1.default.createElement("div", { className: b('popup-filter') },
+    react_1.default.createElement(uikit_1.TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown })));
+exports.renderFilter = renderFilter;
+const renderOption = (option) => (react_1.default.createElement(CustomSelectOption_1.CustomSelectOption, { data: option }));
+exports.renderOption = renderOption;

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

@@ -0,0 +1,14 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-feed-custom-select-option {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+}
+.bc-feed-custom-select-option__icon {
+  margin-right: 6px;
+}
+.bc-feed-custom-select-option__icon > svg {
+  width: 20px;
+  height: 20px;
+}

package/build/cjs/components/FeedHeader/components/CustomSelectOption/CustomSelectOption.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SelectOption as SelectOptionType } from '@gravity-ui/uikit';
+export type CustomSelectOptionProps = {
+    data: {
+        icon?: React.ReactElement;
+    } & SelectOptionType;
+};
+export declare const CustomSelectOption: ({ data }: CustomSelectOptionProps) => JSX.Element;

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSelectOption = void 0;
+const react_1 = __importDefault(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('feed-custom-select-option');
+const CustomSelectOption = ({ data }) => (react_1.default.createElement("div", { className: b() },
+    react_1.default.createElement("span", { className: b('icon') }, data.icon),
+    react_1.default.createElement("span", null, data.content)));
+exports.CustomSelectOption = CustomSelectOption;