@doyourjob/gravity-ui-page-constructor 5.31.16 → 5.31.17

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

@@ -0,0 +1,3 @@
+import { BlogFeedBlockProps } from '../../models';
+export declare const BlogFeedBlock: ({ image, title }: BlogFeedBlockProps) => JSX.Element;
+export default BlogFeedBlock;

package/build/cjs/blocks/BlogFeed/BlogFeed.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogFeedBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const FeedHeader_1 = tslib_1.__importDefault(require("../../components/FeedHeader/FeedHeader"));
+const BlogFeedPosts_1 = tslib_1.__importDefault(require("./BlogFeedPosts/BlogFeedPosts"));
+const BlogFeedBlock = ({ image, title }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(FeedHeader_1.default, { image: image, title: title }),
+    react_1.default.createElement(BlogFeedPosts_1.default, null)));
+exports.BlogFeedBlock = BlogFeedBlock;
+exports.default = exports.BlogFeedBlock;

package/build/cjs/blocks/BlogFeed/BlogFeedPosts/BlogFeedPosts.css

@@ -0,0 +1,6 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-blog-feed-posts__wrap {
+  padding-top: 24px;
+  scroll-margin: 48px;
+}

package/build/cjs/blocks/BlogFeed/BlogFeedPosts/BlogFeedPosts.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const BlogFeedPosts: () => JSX.Element | null;
+declare const _default: React.MemoExoticComponent<() => JSX.Element | null>;
+export default _default;

package/build/cjs/blocks/BlogFeed/BlogFeedPosts/BlogFeedPosts.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogFeedPosts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const __1 = require("../..");
+const components_1 = require("../../../components");
+const blogPostsContext_1 = require("../../../context/blogPostsContext");
+const models_1 = require("../../../models");
+const PostCard_1 = tslib_1.__importDefault(require("../../../sub-blocks/PostCard/PostCard"));
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('blog-feed-posts');
+const colSizes = {
+    all: 12,
+    lg: 4,
+    md: 6,
+};
+const BlogFeedPosts = () => {
+    const { pinnedPost, posts, page, pageSize, onLoadMore } = (0, react_1.useContext)(blogPostsContext_1.BlogPostsContext);
+    const itemsToShow = posts.slice(0, page * pageSize);
+    const hasMore = page < Math.ceil(posts.length / pageSize);
+    if (posts.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        pinnedPost && (react_1.default.createElement("div", { className: b('wrap') },
+            react_1.default.createElement(PostCard_1.default, Object.assign({}, pinnedPost, { size: models_1.PostCardSize.MEDIUM, fullWidth: true, showTag: true, titleHeadingLevel: models_1.PostCardTitleHeadingLevel.H2 })))),
+        react_1.default.createElement(__1.CardLayoutBlock, { className: b('wrap'), colSizes: colSizes }, itemsToShow.map((item) => (react_1.default.createElement(PostCard_1.default, Object.assign({ key: item.slug }, item, { showTag: true, titleHeadingLevel: pinnedPost ? models_1.PostCardTitleHeadingLevel.H3 : models_1.PostCardTitleHeadingLevel.H2 }))))),
+        react_1.default.createElement(components_1.InfiniteScroll, { hasMore: hasMore, onNext: onLoadMore })));
+};
+exports.BlogFeedPosts = BlogFeedPosts;
+exports.default = react_1.default.memo(exports.BlogFeedPosts);

package/build/cjs/blocks/BlogFeed/schema.d.ts

@@ -0,0 +1,18 @@
+export declare const BlogFeedBlock: {
+    'blog-feed-block': {
+        additionalProperties: boolean;
+        required: never[];
+        properties: {
+            title: {
+                type: string;
+            };
+            image: {
+                type: string;
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};

package/build/cjs/blocks/BlogFeed/schema.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogFeedBlock = void 0;
+const common_1 = require("./../../schema/validators/common");
+exports.BlogFeedBlock = {
+    'blog-feed-block': {
+        additionalProperties: false,
+        required: [],
+        properties: Object.assign(Object.assign({}, common_1.BaseProps), { title: {
+                type: 'string',
+            }, image: {
+                type: 'string',
+            } }),
+    },
+};

package/build/cjs/blocks/EventsFeed/EventsFeed.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EventsFeedBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const EventsFeedHeader_1 = tslib_1.__importDefault(require("./EventsFeedHeader/EventsFeedHeader"));
+const FeedHeader_1 = tslib_1.__importDefault(require("../../components/FeedHeader/FeedHeader"));
 const EventsFeedRecent_1 = tslib_1.__importDefault(require("./EventsFeedRecent/EventsFeedRecent"));
 const EventsFeedUpcoming_1 = tslib_1.__importDefault(require("./EventsFeedUpcoming/EventsFeedUpcoming"));
 const EventsFeedBlock = ({ image, title }) => (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(EventsFeedHeader_1.default, { image: image, title: title }),
+    react_1.default.createElement(FeedHeader_1.default, { image: image, title: title }),
     react_1.default.createElement(EventsFeedUpcoming_1.default, null),
     react_1.default.createElement(EventsFeedRecent_1.default, null)));
 exports.EventsFeedBlock = EventsFeedBlock;

package/build/cjs/blocks/EventsFeed/EventsFeedRecent/EventsFeedRecent.js

@@ -6,8 +6,8 @@ const react_1 = tslib_1.__importStar(require("react"));
 const __1 = require("../..");
 const components_1 = require("../../../components");
 const eventsContext_1 = require("../../../context/eventsContext");
+const sub_blocks_1 = require("../../../sub-blocks");
 const utils_1 = require("../../../utils");
-const EventsFeedCard_1 = tslib_1.__importDefault(require("../EventsFeedCard/EventsFeedCard"));
 const i18n_1 = require("../i18n");
 const b = (0, utils_1.block)('events-feed-recent');
 const colSizes = {
@@ -26,7 +26,7 @@ const EventsFeedRecent = () => {
     }
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement(components_1.Anchor, { id: "recent" }),
-        react_1.default.createElement(__1.CardLayoutBlock, { title: (0, i18n_1.i18n)('recent_events'), colSizes: colSizes }, itemsToShow.map((item) => (react_1.default.createElement(EventsFeedCard_1.default, Object.assign({ key: item.slug }, item))))),
+        react_1.default.createElement(__1.CardLayoutBlock, { title: (0, i18n_1.i18n)('recent_events'), colSizes: colSizes }, itemsToShow.map((item) => (react_1.default.createElement(sub_blocks_1.FeedCard, Object.assign({ key: item.slug }, item))))),
         react_1.default.createElement(components_1.InfiniteScroll, { hasMore: hasMore, onNext: onLoadMore })));
 };
 exports.EventsFeedRecent = EventsFeedRecent;

package/build/cjs/blocks/EventsFeed/EventsFeedUpcoming/EventsFeedUpcoming.js

@@ -6,8 +6,8 @@ const react_1 = tslib_1.__importStar(require("react"));
 const __1 = require("../..");
 const components_1 = require("../../../components");
 const eventsContext_1 = require("../../../context/eventsContext");
+const sub_blocks_1 = require("../../../sub-blocks");
 const utils_1 = require("../../../utils");
-const EventsFeedCard_1 = tslib_1.__importDefault(require("./../EventsFeedCard/EventsFeedCard"));
 const b = (0, utils_1.block)('events-feed-upcoming');
 const colSizes = {
     sm: 12,
@@ -20,7 +20,7 @@ const EventsFeedUpcoming = () => {
     const { upcoming } = (0, react_1.useContext)(eventsContext_1.EventsUpcomingContext);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement(components_1.Anchor, { id: "upcoming" }),
-        react_1.default.createElement(__1.CardLayoutBlock, { colSizes: colSizes }, upcoming.map((item) => (react_1.default.createElement(EventsFeedCard_1.default, Object.assign({ key: item.slug }, item)))))));
+        react_1.default.createElement(__1.CardLayoutBlock, { colSizes: colSizes }, upcoming.map((item) => (react_1.default.createElement(sub_blocks_1.FeedCard, Object.assign({ key: item.slug }, item)))))));
 };
 exports.EventsFeedUpcoming = EventsFeedUpcoming;
 exports.default = react_1.default.memo(exports.EventsFeedUpcoming);

package/build/cjs/blocks/EventsFeed/i18n/en.json

@@ -1,5 +1,3 @@
 {
-  "search": "Search",
-  "recent_events": "Recent events",
-  "clear": "Clear"
+  "recent_events": "Recent events"
 }

package/build/cjs/blocks/EventsFeed/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "search" | "clear" | "recent_events", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "recent_events", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/blocks/EventsFeed/i18n/ru.json

@@ -1,5 +1,3 @@
 {
-  "search": "Поиск",
-  "recent_events": "Последние события",
-  "clear": "Очистить"
+  "recent_events": "Последние события"
 }

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

@@ -23,4 +23,5 @@ export { default as ServicesBlock } from './Services/Services';
 export { default as QuotesBlock } from './Quotes/Quotes';
 export { default as LinkTableBlock } from './LinkTable/LinkTable';
 export { default as EventsFeedBlock } from './EventsFeed/EventsFeed';
+export { default as BlogFeedBlock } from './BlogFeed/BlogFeed';
 export { default as PressReleasesBlock } from './PressReleases/PressReleases';

package/build/cjs/blocks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PressReleasesBlock = exports.EventsFeedBlock = exports.LinkTableBlock = exports.QuotesBlock = exports.ServicesBlock = exports.SolutionsBlock = exports.MarqueeLinksBlock = exports.FormBlock = exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
+exports.PressReleasesBlock = exports.BlogFeedBlock = exports.EventsFeedBlock = exports.LinkTableBlock = exports.QuotesBlock = exports.ServicesBlock = exports.SolutionsBlock = exports.MarqueeLinksBlock = exports.FormBlock = exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
 var Banner_1 = require("./Banner/Banner");
 Object.defineProperty(exports, "BannerBlock", { enumerable: true, get: function () { return __importDefault(Banner_1).default; } });
 var Companies_1 = require("./Companies/Companies");
@@ -54,5 +54,7 @@ var LinkTable_1 = require("./LinkTable/LinkTable");
 Object.defineProperty(exports, "LinkTableBlock", { enumerable: true, get: function () { return __importDefault(LinkTable_1).default; } });
 var EventsFeed_1 = require("./EventsFeed/EventsFeed");
 Object.defineProperty(exports, "EventsFeedBlock", { enumerable: true, get: function () { return __importDefault(EventsFeed_1).default; } });
+var BlogFeed_1 = require("./BlogFeed/BlogFeed");
+Object.defineProperty(exports, "BlogFeedBlock", { enumerable: true, get: function () { return __importDefault(BlogFeed_1).default; } });
 var PressReleases_1 = require("./PressReleases/PressReleases");
 Object.defineProperty(exports, "PressReleasesBlock", { enumerable: true, get: function () { return __importDefault(PressReleases_1).default; } });

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

@@ -14,6 +14,7 @@ export type CardBasePropsType = PropsWithChildren<CardBaseProps>;
 export interface CardHeaderBaseProps {
     className?: string;
     image?: ImageProps | null;
+    imageExtraProps?: React.HTMLAttributes<HTMLImageElement>;
 }
 export interface CardFooterBaseProps {
     className?: string;

package/build/cjs/components/CardBase/CardBase.js

@@ -17,13 +17,14 @@ const Layout = (props) => {
     const { className, bodyClassName, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.CardBase, url);
     const qaAttributes = (0, react_1.useMemo)(() => (0, utils_1.getQaAttrubutes)(qa, 'header', 'footer', 'body', 'content'), [qa]);
-    const { header, content, footer, image, headerClass, footerClass } = (0, react_1.useMemo)(() => {
-        let _header, _content, _footer, _image, _headerClass, _footerClass;
+    const { header, content, footer, image, imageExtraProps, headerClass, footerClass } = (0, react_1.useMemo)(() => {
+        let _header, _content, _footer, _image, _imageExtraProps, _headerClass, _footerClass;
         function handleChild(child) {
             switch (child.type) {
                 case Header:
                     _header = child.props.children;
                     _image = child.props.image;
+                    _imageExtraProps = child.props.imageExtraProps;
                     _headerClass = child.props.className;
                     break;
                 case Content:
@@ -45,12 +46,13 @@ const Layout = (props) => {
             content: _content,
             footer: _footer,
             image: _image,
+            imageExtraProps: _imageExtraProps,
             headerClass: _headerClass,
             footerClass: _footerClass,
         };
     }, [children]);
     const cardContent = (0, react_1.useMemo)(() => (react_1.default.createElement(react_1.Fragment, null,
-        (header || image) && (react_1.default.createElement(BackgroundImage_1.default, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image), { qa: qaAttributes.header }),
+        (header || image) && (react_1.default.createElement(BackgroundImage_1.default, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image), { extraProps: imageExtraProps, qa: qaAttributes.header }),
             react_1.default.createElement("div", { className: b('header-content') }, header))),
         react_1.default.createElement("div", { className: b('body', bodyClassName), "data-qa": qaAttributes.body },
             react_1.default.createElement("div", { className: b('content', contentClassName), "data-qa": qaAttributes.content }, content),
@@ -58,6 +60,7 @@ const Layout = (props) => {
         header,
         content,
         image,
+        imageExtraProps,
         headerClass,
         bodyClassName,
         contentClassName,

package/build/{esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/EventsFeedHeaderControls.css → cjs/components/FeedHeader/Controls/Controls.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-events-feed-header-controls {
+.pc-feed-header-controls {
   position: relative;
   z-index: 10;
   display: flex;
@@ -8,42 +8,43 @@ unpredictable css rules order in build */
   padding-bottom: 20px;
   border-radius: var(--bc-border-radius);
 }
-.pc-events-feed-header-controls__title, .pc-events-feed-header-controls__filters {
+.pc-feed-header-controls__title, .pc-feed-header-controls__filters {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
-.pc-events-feed-header-controls__title {
+.pc-feed-header-controls__title {
   padding-top: 112px;
   padding-bottom: 96px;
+  margin: 0;
   font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
   line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
 }
-.pc-events-feed-header-controls__filter-input, .pc-events-feed-header-controls__filter-select {
+.pc-feed-header-controls__filter-input, .pc-feed-header-controls__filter-select {
   width: 100%;
 }
-.pc-events-feed-header-controls__popup {
+.pc-feed-header-controls__popup {
   max-height: 500px;
   border-radius: 12px;
 }
-.pc-events-feed-header-controls__popup .g-select-list::-webkit-scrollbar {
+.pc-feed-header-controls__popup .g-select-list::-webkit-scrollbar {
   display: none;
 }
-.pc-events-feed-header-controls__popup .g-select-list .g-list {
+.pc-feed-header-controls__popup .g-select-list .g-list {
   max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
 }
-.pc-events-feed-header-controls__popup .g-list__item {
+.pc-feed-header-controls__popup .g-list__item {
   margin: 4px;
   border-radius: 8px;
 }
-.pc-events-feed-header-controls__popup_mobile {
+.pc-feed-header-controls__popup_mobile {
   max-height: inherit;
 }
-.pc-events-feed-header-controls__popup_mobile .pc-events-feed-header-controls__popup-filter {
+.pc-feed-header-controls__popup_mobile .pc-feed-header-controls__popup-filter {
   position: relative;
   border: none;
 }
-.pc-events-feed-header-controls__popup_mobile .pc-events-feed-header-controls__popup-filter::before {
+.pc-feed-header-controls__popup_mobile .pc-feed-header-controls__popup-filter::before {
   position: absolute;
   bottom: 0px;
   left: 50%;
@@ -55,7 +56,7 @@ unpredictable css rules order in build */
   border-bottom-left-radius: 0;
   transform: translateX(-50%);
 }
-.pc-events-feed-header-controls__popup-filter {
+.pc-feed-header-controls__popup-filter {
   padding: 4px 12px;
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
@@ -64,7 +65,7 @@ unpredictable css rules order in build */
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.pc-events-feed-header-controls__filter-item {
+.pc-feed-header-controls__filter-item {
   flex-grow: 1;
   min-width: 230px;
   margin-right: 8px;
@@ -72,7 +73,7 @@ unpredictable css rules order in build */
   margin-left: 8px;
 }
 @media (min-width: 577px) {
-  .pc-events-feed-header-controls__filter-item {
+  .pc-feed-header-controls__filter-item {
     max-width: 240px;
   }
 }

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ControlsProps = {
+    title?: string;
+};
+export declare const Controls: ({ title }: ControlsProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ title }: ControlsProps) => JSX.Element>;
+export default _default;

package/build/cjs/{blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/EventsFeedHeaderControls.js → components/FeedHeader/Controls/Controls.js}

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventsFeedHeaderControls = void 0;
+exports.Controls = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const eventsContext_1 = require("../../../../context/eventsContext");
-const mobileContext_1 = require("../../../../context/mobileContext");
-const utils_1 = require("../../../../utils");
-const EventsFeedHeaderSearch_1 = require("../EventsFeedHeaderSearch/EventsFeedHeaderSearch");
+const feedHeaderContext_1 = require("../../../context/feedHeaderContext");
+const mobileContext_1 = require("../../../context/mobileContext");
+const utils_1 = require("../../../utils");
+const Search_1 = require("../Search/Search");
 const customRenders_1 = require("./customRenders");
-const b = (0, utils_1.block)('events-feed-header-controls');
+const b = (0, utils_1.block)('feed-header-controls');
 const VIRTUALIZATION_THRESHOLD = 1000;
 const FilterInput = ({ value, onChange, label, }) => (react_1.default.createElement("div", { className: b('filter-item') },
-    react_1.default.createElement(EventsFeedHeaderSearch_1.EventsFeedHeaderSearch, { className: b('filter-input'), placeholder: label, initialValue: value, onSubmit: onChange })));
-const FilterSelect = ({ label, value, onChange, items = [], }) => {
+    react_1.default.createElement(Search_1.Search, { className: b('filter-input'), placeholder: label, initialValue: value, onSubmit: onChange })));
+const FilterMultipleSelect = ({ label, value, onChange, items = [], }) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const handleUpdate = (selected) => {
         const asString = selected.join(',');
@@ -27,14 +27,30 @@ const FilterSelect = ({ label, value, onChange, items = [], }) => {
                 defaultLabel: label || '',
             }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption, renderFilter: customRenders_1.renderFilter, multiple: true, filterable: true, hasClear: true })));
 };
+const FilterSelect = ({ label, value, onChange, items = [], }) => {
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const handleUpdate = (selected) => {
+        const isEmpty = selected.some((tag) => tag === 'empty');
+        onChange(isEmpty ? '' : selected[0]);
+    };
+    const valueLocal = (0, react_1.useMemo)(() => (value ? [value] : []), [value]);
+    return (react_1.default.createElement("div", { className: b('filter-item') },
+        react_1.default.createElement(uikit_1.Select, { className: b('filter-select'), size: "xl", options: items, defaultValue: [], value: valueLocal, onUpdate: handleUpdate, popupClassName: b('popup', { mobile: isMobile }), renderControl: (0, customRenders_1.renderSwitcher)({
+                initial: valueLocal,
+                list: items,
+                defaultLabel: label || '',
+            }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: customRenders_1.renderOption })));
+};
 const Filter = ({ name, type, value, label, items, }) => {
-    const { onChangeFilter } = (0, react_1.useContext)(eventsContext_1.EventsHeaderFunctionsContext);
+    const { onChangeFilter } = (0, react_1.useContext)(feedHeaderContext_1.FeedHeaderFunctionsContext);
     const handleChangeFilter = (0, react_1.useCallback)((data) => {
         onChangeFilter === null || onChangeFilter === void 0 ? void 0 : onChangeFilter({ [name]: data });
     }, [name, onChangeFilter]);
     switch (type) {
         case 'input':
             return react_1.default.createElement(FilterInput, { label: label, value: value, onChange: handleChangeFilter });
+        case 'multiple-select':
+            return (react_1.default.createElement(FilterMultipleSelect, { label: label, items: items, value: value, onChange: handleChangeFilter }));
         case 'select':
             return (react_1.default.createElement(FilterSelect, { label: label, items: items, value: value, onChange: handleChangeFilter }));
         default:
@@ -42,12 +58,12 @@ const Filter = ({ name, type, value, label, items, }) => {
     }
 };
 const FilterMemo = react_1.default.memo(Filter);
-const EventsFeedHeaderControls = ({ title }) => {
-    const { filter } = (0, react_1.useContext)(eventsContext_1.EventsHeaderFilterContext);
-    const { filters } = (0, react_1.useContext)(eventsContext_1.EventsHeaderFiltersContext);
+const Controls = ({ title }) => {
+    const { filters } = (0, react_1.useContext)(feedHeaderContext_1.FeedHeaderFiltersContext);
+    const { filter } = (0, react_1.useContext)(feedHeaderContext_1.FeedHeaderFilterContext);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("h1", { className: b('title') }, title),
-        react_1.default.createElement("div", { className: b('filters') }, filters.map((item) => (react_1.default.createElement(FilterMemo, { key: item.name, name: item.name, type: item.type, value: filter[item.name], label: item.label, items: item.items }))))));
+        react_1.default.createElement("div", { className: b('filters') }, filters.map((item) => (react_1.default.createElement(FilterMemo, { key: item.name, name: item.name, value: filter[item.name], type: item.type, label: item.label, items: item.items }))))));
 };
-exports.EventsFeedHeaderControls = EventsFeedHeaderControls;
-exports.default = react_1.default.memo(exports.EventsFeedHeaderControls);
+exports.Controls = Controls;
+exports.default = react_1.default.memo(exports.Controls);

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderOption = exports.renderFilter = exports.renderSwitcher = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const SelectOption_1 = require("../SelectOption/SelectOption");
+const Switcher_1 = require("../Switcher/Switcher");
+const i18n_1 = require("../i18n");
+const b = (0, utils_1.block)('feed-header-controls');
+const renderSwitcher = ({ initial, list, defaultLabel }) => {
+    const WrapSwitcher = ({ onClick, ref, onKeyDown, open, renderClear, popupId, activeIndex, }) => {
+        return (react_1.default.createElement(Switcher_1.Switcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, renderClear: renderClear, open: open, popupId: popupId, activeIndex: activeIndex }));
+    };
+    return WrapSwitcher;
+};
+exports.renderSwitcher = renderSwitcher;
+const renderFilter = ({ value, onChange, onKeyDown }) => {
+    return (react_1.default.createElement(uikit_1.TextInput, { controlProps: { size: 1 }, value: value, view: 'clear', placeholder: (0, i18n_1.i18n)('search'), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
+};
+exports.renderFilter = renderFilter;
+const renderOption = (option) => {
+    return react_1.default.createElement(SelectOption_1.SelectOption, { data: option });
+};
+exports.renderOption = renderOption;

package/build/{esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeader.css → cjs/components/FeedHeader/FeedHeader.css}

@@ -1,15 +1,15 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-events-feed-header {
+.pc-feed-header {
   padding: 16px 0;
 }
-.pc-events-feed-header__content {
+.pc-feed-header__content {
   position: relative;
   z-index: 10;
   height: 100%;
   padding-bottom: 0;
 }
-.pc-events-feed-header__background {
+.pc-feed-header__background {
   position: absolute;
   top: 0;
   left: 50%;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ControlsProps } from './Controls/Controls';
+interface FeedHeaderProps extends ControlsProps {
+    image?: string;
+}
+export declare const FeedHeader: ({ title, image }: FeedHeaderProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ title, image }: FeedHeaderProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedHeader = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../components");
+const grid_1 = require("../../grid");
+const utils_1 = require("../../utils");
+const Controls_1 = tslib_1.__importDefault(require("./Controls/Controls"));
+const b = (0, utils_1.block)('feed-header');
+const FeedHeader = ({ title, image }) => {
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(grid_1.Grid, { className: b('content') },
+            image && react_1.default.createElement(components_1.BackgroundImage, { src: image, className: b('background') }),
+            react_1.default.createElement(Controls_1.default, { title: title }))));
+};
+exports.FeedHeader = FeedHeader;
+exports.default = react_1.default.memo(exports.FeedHeader);

package/build/{esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSearch/EventsFeedHeaderSearch.css → cjs/components/FeedHeader/Search/Search.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-events-feed-header-search {
+.pc-feed-header-search {
   position: relative;
   display: flex;
   justify-content: flex-end;
@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
   transition: width 0.3s;
 }
-.pc-events-feed-header-search__input-icon {
+.pc-feed-header-search__input-icon {
   display: flex;
   padding-right: 7px;
   font: inherit;
@@ -18,7 +18,7 @@ unpredictable css rules order in build */
   border: none;
   background: none;
 }
-.pc-events-feed-header-search__suggest {
+.pc-feed-header-search__suggest {
   display: flex;
   align-items: center;
   height: 44px;
@@ -26,20 +26,20 @@ unpredictable css rules order in build */
   border-radius: var(--bc-text-input-border-radius);
   background-color: var(--g-color-base-background);
 }
-.pc-events-feed-header-search__suggest:hover, .pc-events-feed-header-search__suggest:focus {
+.pc-feed-header-search__suggest:hover, .pc-feed-header-search__suggest:focus {
   border: 1px solid var(--g-color-base-generic-hover);
 }
-.pc-events-feed-header-search__control.pc-events-feed-header-search__control {
+.pc-feed-header-search__control.pc-feed-header-search__control {
   padding-right: 32px;
   padding-left: 12px;
 }
 
-.pc-events-feed-header-search_size_s {
+.pc-feed-header-search_size_s {
   --bc-text-input-border-radius: var(--g-border-radius-l);
   width: 352px;
   max-width: 100%;
   height: 36px;
 }
-.pc-events-feed-header-search_size_m {
+.pc-feed-header-search_size_m {
   --bc-text-input-border-radius: var(--g-border-radius-xl);
 }

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

@@ -0,0 +1,11 @@
+export type SearchSize = 's' | 'm';
+type SearchProps = {
+    className?: string;
+    initialValue?: string;
+    onSubmit: (value: string) => void;
+    debounce?: number;
+    placeholder?: string;
+    size?: SearchSize;
+};
+export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, }: SearchProps) => JSX.Element;
+export default Search;

package/build/cjs/{blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSearch/EventsFeedHeaderSearch.js → components/FeedHeader/Search/Search.js}

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventsFeedHeaderSearch = void 0;
+exports.Search = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const CloseIcon_1 = require("../../../../icons/CloseIcon");
-const SearchIcon_1 = require("../../../../icons/SearchIcon");
-const utils_1 = require("../../../../utils");
-const i18n_1 = require("../../i18n");
-const b = (0, utils_1.block)('events-feed-header-search');
+const CloseIcon_1 = require("../../../icons/CloseIcon");
+const SearchIcon_1 = require("../../../icons/SearchIcon");
+const utils_1 = require("../../../utils");
+const i18n_1 = require("../i18n");
+const b = (0, utils_1.block)('feed-header-search');
 const SEARCH_ICON_SIZE = 16;
 const CLOSE_ICON_SIZE = 12;
-const EventsFeedHeaderSearch = ({ className, initialValue, onSubmit, debounce = 300, placeholder, size = 'm', }) => {
+const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder, size = 'm', }) => {
     const handleChange = (0, debounce_1.default)(onSubmit, debounce);
     const [isSetInitValue, setIsSetInitValue] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(initialValue);
@@ -45,5 +45,5 @@ const EventsFeedHeaderSearch = ({ className, initialValue, onSubmit, debounce =
                 className: b('control'),
             }, rightContent: rightContent })));
 };
-exports.EventsFeedHeaderSearch = EventsFeedHeaderSearch;
-exports.default = exports.EventsFeedHeaderSearch;
+exports.Search = Search;
+exports.default = exports.Search;

package/build/cjs/{blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSelectOption/EventsFeedHeaderSelectOption.css → components/FeedHeader/SelectOption/SelectOption.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-events-feed-header-select-option {
+.pc-feed-header-select-option {
   display: flex;
   font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));