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

package/build/esm/blocks/Layout/Layout.js

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { Col, Row, } from '@gravity-ui/page-constructor';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PaddingsDirections } from '../../models/paddings';
+import { block } from '../../utils/cn';
+import './Layout.css';
+const b = block('layout');
+export const Layout = ({ fullWidth, mobileOrder, children, paddingTop = 'xs', paddingBottom = 'xs', }) => {
+    const layout = useMemo(() => {
+        const layoutConfig = {
+            leftCol: {
+                sizes: { all: 12, lg: 8 },
+                orders: { all: 1, lg: 1 },
+            },
+            rightCol: {
+                sizes: { all: 12, lg: 3 },
+                offsets: {
+                    all: 0,
+                    lg: 1,
+                },
+                orders: { all: 2, lg: 2 },
+            },
+        };
+        if (fullWidth) {
+            layoutConfig.leftCol.sizes = { all: 12 };
+            layoutConfig.rightCol.sizes = { all: 12 };
+            layoutConfig.rightCol.offsets = { all: 0 };
+        }
+        if (mobileOrder === 'reverse') {
+            layoutConfig.leftCol.orders = { all: 3, lg: 1 };
+        }
+        return layoutConfig;
+    }, [fullWidth, mobileOrder]);
+    const renderChildren = (blockChildren) => React.Children.map(blockChildren, (child, i) => (React.createElement("div", { key: i, className: b('item') }, child)));
+    const { left, right } = useMemo(() => children === null || children === void 0 ? void 0 : children.reduce((sortedChildren, child) => {
+        var _a, _b;
+        if (((_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.column) === 'left') {
+            sortedChildren.left.push(child);
+        }
+        else {
+            sortedChildren.right.push(child);
+        }
+        return sortedChildren;
+    }, { left: [], right: [] }), [children]);
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        } },
+        React.createElement(Row, { className: b('row'), noGutter: true },
+            React.createElement(Col, Object.assign({ className: b('left-col') }, layout.leftCol), left && renderChildren(left)),
+            React.createElement(Col, Object.assign({ className: b('right-col') }, layout.rightCol), right && renderChildren(right)))));
+};

package/build/esm/blocks/Media/Media.css

@@ -0,0 +1,41 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-media__text-content {
+  padding-top: 16px;
+}
+.bc-media__container {
+  position: relative;
+  height: 100%;
+}
+.bc-media__border {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border-radius: calc(var(--bc-border-radius) + 1px);
+  border: 1px solid var(--yc-color-line-generic);
+  overflow: hidden;
+}
+.bc-media__content {
+  position: relative;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  object-fit: cover;
+  border-radius: var(--bc-border-radius);
+}
+.bc-media__video {
+  height: 100%;
+}
+.bc-media__video > video {
+  width: 100%;
+  height: auto;
+  border-radius: var(--bc-border-radius);
+}
+.bc-media__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--bc-border-radius);
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MediaProps } from '../../models/blocks';
+import './Media.css';
+export declare const Media: React.FC<MediaProps>;

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

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Media as PCMedia, YFMWrapper } from '@gravity-ui/page-constructor';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PaddingsDirections } from '../../models/paddings';
+import { block } from '../../utils/cn';
+import './Media.css';
+const b = block('media');
+export const Media = (_a) => {
+    var { text, paddingTop, paddingBottom } = _a, mediaProps = __rest(_a, ["text", "paddingTop", "paddingBottom"]);
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('container') },
+        React.createElement("div", { className: b('border'), "data-qa": "blog-media-content" },
+            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: {
+                    blogMedia: true,
+                    resetPaddings: true,
+                } })))));
+};

package/build/esm/blocks/Meta/Meta.css

@@ -0,0 +1,7 @@
+.bc-meta {
+  padding: 0;
+  margin: 0;
+}
+.bc-meta__breadcrumbs {
+  display: inline-block;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MetaProps } from '../../models/blocks';
+import './Meta.css';
+export declare const Meta: React.FC<MetaProps>;

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

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import { HeaderBreadcrumbs, YFMWrapper } from '@gravity-ui/page-constructor';
+import { PostPageContext } from '../../contexts/PostPageContext';
+import { LocaleContext } from '../../contexts/LocaleContext';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PostInfo } from '../../components/PostInfo/PostInfo';
+import { PaddingsDirections } from '../../models/paddings';
+import { getBreadcrumbs } from '../../utils/common';
+import { BlogMetrikaGoalIds } from '../../constants';
+import { block } from '../../utils/cn';
+import './Meta.css';
+const b = block('meta');
+const metrikaGoals = {
+    sharing: BlogMetrikaGoalIds.shareBottom,
+    save: BlogMetrikaGoalIds.saveBottom,
+};
+const breadcrumbsGoals = [
+    {
+        name: BlogMetrikaGoalIds.breadcrumbsBottom,
+        isCrossSite: true,
+    },
+];
+export const Meta = (props) => {
+    const { paddingTop = 'l', paddingBottom = 'l', theme = 'light' } = props;
+    const { post } = useContext(PostPageContext);
+    const { locale } = useContext(LocaleContext);
+    const { title, id, date, readingTime, tags } = post;
+    const breadcrumbs = getBreadcrumbs({ tags, pathPrefix: (locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '' });
+    breadcrumbs.metrikaGoals = breadcrumbsGoals;
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        }, dataQa: "blog-meta-content" },
+        breadcrumbs && (React.createElement(HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
+        title && (React.createElement(YFMWrapper, { content: title, modifiers: {
+                blogBreadcrumbs: true,
+                resetPaddings: true,
+            } })),
+        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, dataQa: "blog-meta-block" }))));
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SuggestProps } from '../../models/blocks';
+/**
+ * Suggested posts block
+ *
+ * @param posts - suggested posts list
+ * @param paddingTop - padding top code
+ * @param paddingBottom - padding bottom code
+ *
+ * @returns -jsx
+ */
+export declare const Suggest: React.FC<SuggestProps>;

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

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { SliderBlock } from '@gravity-ui/page-constructor';
+import { i18, Keyset } from '../../i18n';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PostCard } from '../../components/PostCard/PostCard';
+import { PaddingsDirections } from '../../models/paddings';
+import { PostPageContext } from '../../contexts/PostPageContext';
+import { BlogMetrikaGoalIds } from '../../constants';
+const metrikaGoals = [
+    {
+        name: BlogMetrikaGoalIds.suggest,
+        isCrossSite: true,
+    },
+];
+/**
+ * Suggested posts block
+ *
+ * @param posts - suggested posts list
+ * @param paddingTop - padding top code
+ * @param paddingBottom - padding bottom code
+ *
+ * @returns -jsx
+ */
+export const Suggest = ({ paddingTop = 'l', paddingBottom = 'l' }) => {
+    const { suggestedPosts } = useContext(PostPageContext);
+    if (suggestedPosts.length === 0) {
+        return null;
+    }
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        } },
+        React.createElement(SliderBlock, { slidesToShow: { xl: 3, lg: 2, sm: 1 }, title: { text: i18(Keyset.TitleSuggest) } }, suggestedPosts.map((post) => (React.createElement(PostCard, { key: post.id, metrikaGoals: metrikaGoals, post: post }))))));
+};

package/build/esm/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/esm/blocks/YFM/YFM.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { YFMWrapper } from '@gravity-ui/page-constructor';
+import block from 'bem-cn-lite';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PaddingsDirections } from '../../models/paddings';
+const b = block('yfm');
+export const YFM = (props) => {
+    const { text, paddingTop, paddingBottom } = props;
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        } },
+        React.createElement(YFMWrapper, { content: text, modifiers: {
+                blog: true,
+                resetPaddings: true,
+            }, className: b({ 'no-list-reset': true }) })));
+};

package/build/esm/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/esm/blocks/constants.js

@@ -0,0 +1,5 @@
+export const CONTENT_DEFAULT_SIZE = 's';
+export const CONTENT_DEFAULT_COL_SIZES = { all: 12, md: 12 };
+export const CONTENT_DEFAULT_THEME = 'default';
+export const DEFAULT_PAGE = 1;
+export const DEFAULT_ROWS_PER_PAGE = 12;

package/build/esm/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/esm/components/ButtonWithIcon/ButtonWithIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SVGIconData } from '@gravity-ui/uikit/build/esm/components/Icon/types';
+import { ClassNameProps } from '../../models/common';
+import './ButtonWithIcon.css';
+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/esm/components/ButtonWithIcon/ButtonWithIcon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import './ButtonWithIcon.css';
+const b = block('button-with-icon');
+export const ButtonWithIcon = ({ icon, theme = 'primary', size = 's', iconSize = 16, disabled = false, onClick, className, }) => (React.createElement("button", { type: "button", className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
+    React.createElement(Icon, { data: icon, size: iconSize })));

package/build/esm/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/esm/components/FeedHeader/FeedHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HeaderBlockProps, ClassNameProps } from '../../models/common';
+import { ControlsProps } from './components/Controls/Controls';
+import './FeedHeader.css';
+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/esm/components/FeedHeader/FeedHeader.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BackgroundImage, Grid, getThemedValue, FullWidthBackground, } from '@gravity-ui/page-constructor';
+import { Controls } from './components/Controls/Controls';
+import { block } from '../../utils/cn';
+import './FeedHeader.css';
+const b = block('feed-header');
+export const FeedHeader = ({ tags, services, setIsFetching, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, handleChangeQuery, queryParams, }) => {
+    const backgroundThemed = background && getThemedValue(background, theme);
+    return (React.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
+        (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (React.createElement(FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,
+        React.createElement(Grid, { className: b('content', { offset, theme, 'vertical-offset': verticalOffset }) },
+            backgroundThemed ? (React.createElement(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.createElement(Controls, { tags: tags, services: services, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQuery, queryParams: queryParams }))));
+};

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

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { HandleChangeQueryParams, SetQueryType, Query } from '../../../../models/common';
+import './Controls.css';
+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/esm/components/FeedHeader/components/Controls/Controls.js

@@ -0,0 +1,77 @@
+import React, { useState, useContext, useMemo } from 'react';
+import { Icon, Button, Select } from '@gravity-ui/uikit';
+import { Search } from '../../../Search/Search';
+import { renderSwitcher, renderFilter, renderOption } from './customRenders';
+import { LikesContext } from '../../../../contexts/LikesContext';
+import { BlogMetrikaGoalIds } from '../../../../constants';
+import metrika from '../../../../counters/metrika.js';
+import { MetrikaCounter } from '../../../../counters/utils';
+import { Save } from '../../../../icons/Save';
+import { i18, Keyset } from '../../../../i18n';
+import { block } from '../../../../utils/cn';
+import './Controls.css';
+const b = block('feed-controls');
+const ICON_SIZE = 16;
+const DEFAULT_PAGE = 1;
+export const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery, queryParams, }) => {
+    const { hasLikes } = useContext(LikesContext);
+    const { savedOnly: savedOnlyInitial, search: searchInitial, tags: tagInitial, services: servicesInitial, } = queryParams || {};
+    const [savedOnly, setSavedOnly] = useState(savedOnlyInitial === 'true');
+    const [search, setSearch] = 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.reachGoal(MetrikaCounter.CrossSite, 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.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.service, {
+            service: metrikaAsString,
+        });
+        const servicesAsString = selectedServices.join(',');
+        handleChangeQuery({ services: servicesAsString, page: DEFAULT_PAGE });
+        setIsFetching(true);
+    };
+    const tagsItems = useMemo(() => [{ value: 'empty', content: i18(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("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("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'), renderControl: renderSwitcher({
+                        initial: [tagInitial],
+                        list: tagsItems,
+                        defaultLabel: i18(Keyset.AllTags),
+                    }), renderOption: renderOption })),
+            services.length > 0 ? (React.createElement("div", { className: b('filter-item') },
+                React.createElement(Select, { className: b('select'), size: "xl", multiple: true, filterable: true, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: i18(Keyset.AllServices), renderControl: renderSwitcher({
+                        initial: servicesItems,
+                        list: services,
+                        defaultLabel: i18(Keyset.AllServices),
+                    }), disablePortal: true, 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)));
+};