@doyourjob/gravity-ui-page-constructor 5.31.85 → 5.31.86-a

package/build/cjs/blocks/Reports/Reports.css

@@ -7,12 +7,6 @@ unpredictable css rules order in build */
 .pc-reports-block__title {
   margin-bottom: 24px;
 }
-.pc-reports-block__select {
-  margin-bottom: 32px;
-  gap: 16px;
-  display: flex;
-  flex-wrap: wrap;
-}
 .pc-reports-block__loader {
   align-self: center;
   width: 48px;

package/build/cjs/blocks/Reports/Reports.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
+const FilterSelects_1 = tslib_1.__importDefault(require("../../components/Filters/FilterSelects/FilterSelects"));
 const reportsContext_1 = require("../../context/reportsContext");
 const utils_1 = require("../../utils");
 const ReportsItem_1 = tslib_1.__importDefault(require("./ReportsItem/ReportsItem"));
@@ -49,7 +50,7 @@ const ReportsBlock = ({ title, typeKey, empty }) => {
     }, [empty, filesOutline, loading, paginatedItems]);
     return (react_1.default.createElement("div", { className: b() },
         title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
-        Boolean(selects.length) && (react_1.default.createElement("div", { className: b('select') }, selects.map(({ name, options }) => (react_1.default.createElement(components_1.Select, { key: name, name: name, options: options, onChange: handleChange }))))),
+        react_1.default.createElement(FilterSelects_1.default, { selects: selects, filters: localFilters, handleChange: handleChange }),
         renderItems,
         itemsPerPage && (react_1.default.createElement(components_1.Paginator, { page: page, itemsPerPage: itemsPerPage, totalItems: filteredItems.length, maxPages: Infinity, onPageChange: setPage, className: b('paginator') }))));
 };

package/build/cjs/blocks/ReportsCards/ReportsCards.css

@@ -3,12 +3,6 @@ unpredictable css rules order in build */
 .pc-reports-cards-block__title {
   margin-bottom: 24px;
 }
-.pc-reports-cards-block__select {
-  margin-bottom: 32px;
-  gap: 16px;
-  display: flex;
-  flex-wrap: wrap;
-}
 .pc-reports-cards-block__postscript {
   font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
   line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));

package/build/cjs/blocks/ReportsCards/ReportsCards.js

@@ -4,6 +4,7 @@ exports.ReportsCardsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../components");
+const FilterSelects_1 = tslib_1.__importDefault(require("../../components/Filters/FilterSelects/FilterSelects"));
 const reportsCardsContext_1 = require("../../context/reportsCardsContext");
 const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
@@ -34,7 +35,7 @@ const ReportsCardsBlock = ({ title, typeKey, postscript, empty }) => {
         : title;
     return (react_1.default.createElement("div", { className: b() },
         title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
-        Boolean(selects.length) && (react_1.default.createElement("div", { className: b('select') }, selects.map(({ name, options }) => (react_1.default.createElement(components_1.Select, { key: name, name: name, options: options, onChange: handleChange }))))),
+        react_1.default.createElement(FilterSelects_1.default, { selects: selects, filters: localFilters, handleChange: handleChange }),
         filteredItems.length ? (react_1.default.createElement(grid_1.Row, null, filteredItems.map((item, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: cardsColSizes },
             react_1.default.createElement(sub_blocks_1.AttachmentCard, Object.assign({}, item))))))) : (react_1.default.createElement(components_1.EmptyPlug, { empty: empty })),
         postscript && (react_1.default.createElement(components_1.YFMWrapper, { className: b('postscript'), content: postscript, modifiers: { constructor: true, [`constructor-size-s`]: true } }))));

package/build/cjs/blocks/ReportsSections/ReportsSections.css

@@ -3,12 +3,6 @@ unpredictable css rules order in build */
 .pc-reports-sections-block__title {
   margin-bottom: 24px;
 }
-.pc-reports-sections-block__select {
-  margin-bottom: 32px;
-  gap: 16px;
-  display: flex;
-  flex-wrap: wrap;
-}
 .pc-reports-sections-block__sections {
   display: flex;
   flex-direction: column;

package/build/cjs/blocks/ReportsSections/ReportsSections.js

@@ -4,6 +4,7 @@ exports.ReportsSectionsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../components");
+const FilterSelects_1 = tslib_1.__importDefault(require("../../components/Filters/FilterSelects/FilterSelects"));
 const reportsSectionsContext_1 = require("../../context/reportsSectionsContext");
 const utils_1 = require("../../utils");
 const Section_1 = tslib_1.__importDefault(require("./Section/Section"));
@@ -28,7 +29,7 @@ const ReportsSectionsBlock = ({ title, typeKey, empty }) => {
         : title;
     return (react_1.default.createElement("div", { className: b() },
         title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
-        Boolean(selects.length) && (react_1.default.createElement("div", { className: b('select') }, selects.map(({ name, options }) => (react_1.default.createElement(components_1.Select, { key: name, name: name, options: options, onChange: handleChange }))))),
+        react_1.default.createElement(FilterSelects_1.default, { selects: selects, filters: localFilters, handleChange: handleChange }),
         filteredItems.length ? (react_1.default.createElement("div", { className: b('sections') }, filteredItems.map((item, index) => (react_1.default.createElement(Section_1.default, Object.assign({ key: index }, item)))))) : (react_1.default.createElement(components_1.EmptyPlug, { empty: empty, className: b('empty') }))));
 };
 exports.ReportsSectionsBlock = ReportsSectionsBlock;

package/build/cjs/blocks/Slider/Slider.css

@@ -118,6 +118,22 @@ unpredictable css rules order in build */
 .pc-SliderBlock .slick-arrow.slick-prev {
   right: 42px;
 }
+.pc-SliderBlock__mobile-scroll {
+  display: flex;
+  margin: 0 -24px;
+  padding: 24px;
+  gap: 16px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.pc-SliderBlock__mobile-scroll::-webkit-scrollbar {
+  display: none;
+}
+.pc-SliderBlock__mobile-scroll-item {
+  flex: 0 0 auto;
+  width: 90%;
+}
 .pc-SliderBlock__header_no-description {
   position: relative;
   top: -3px;
@@ -653,26 +669,6 @@ unpredictable css rules order in build */
 .pc-SliderBlock_type_header-card .slick-arrow.slick-prev {
   left: 0;
 }
-@media (max-width: 577px) {
-  .pc-SliderBlock_type_header-card .slick-arrow {
-    display: none;
-  }
-  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-list {
-    margin-left: 0;
-  }
-  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-track {
-    padding-left: 0;
-  }
-  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide {
-    /* stylelint-disable declaration-no-important */
-    padding-right: 0 !important;
-    padding-left: 0 !important;
-    /* stylelint-enable declaration-no-important */
-  }
-  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
-    padding-right: 0;
-  }
-}
 @media (max-width: 769px) {
   .pc-SliderBlock__footer {
     display: block;
@@ -682,22 +678,4 @@ unpredictable css rules order in build */
     width: 100%;
     padding-bottom: 20px;
   }
-}
-@media (max-width: 577px) {
-  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) {
-    margin-left: -24px;
-    padding-left: 24px;
-    width: calc(100% + 48px);
-    overflow-x: auto;
-  }
-  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-list {
-    margin-left: -24px;
-    margin-right: 0;
-  }
-  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-track {
-    padding-left: 16px;
-  }
-  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-slide {
-    padding: 0 8px;
-  }
 }

package/build/cjs/blocks/Slider/Slider.js

@@ -245,6 +245,11 @@ const SliderBlock = (props) => {
         return disclaimer ? (react_1.default.createElement("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }) }, disclaimer.text)) : null;
     };
     const renderSlider = () => {
+        if (isMobile) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: b('mobile-scroll') }, disclosedChildren.map((child, index) => (react_1.default.createElement("div", { key: index, className: b('mobile-scroll-item') }, child)))),
+                react_1.default.createElement("div", { className: b('footer') }, renderDisclaimer())));
+        }
         /* Disable adding of width in inline styles when SSR to prevent overriding of default styles */
         /* Calculate appropriate breakpoint for mobile devices with user agent */
         const variableWidth = isServer && isMobile;

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

@@ -20,51 +20,6 @@ unpredictable css rules order in build */
   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-feed-header-controls__filter-input, .pc-feed-header-controls__filter-select {
-  width: 100%;
-}
-.pc-feed-header-controls__popup {
-  max-height: 500px;
-  border-radius: 12px;
-}
-.pc-feed-header-controls__popup .g-select-list::-webkit-scrollbar {
-  display: none;
-}
-.pc-feed-header-controls__popup .g-select-list .g-list {
-  max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
-}
-.pc-feed-header-controls__popup .g-list__item {
-  margin: 4px;
-  border-radius: 8px;
-}
-.pc-feed-header-controls__popup_mobile {
-  max-height: inherit;
-}
-.pc-feed-header-controls__popup_mobile .pc-feed-header-controls__popup-filter {
-  position: relative;
-  border: none;
-}
-.pc-feed-header-controls__popup_mobile .pc-feed-header-controls__popup-filter::before {
-  position: absolute;
-  bottom: 0px;
-  left: 50%;
-  width: 100vw;
-  height: 2px;
-  content: "";
-  border-bottom: 2px solid var(--g-color-line-generic);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  transform: translateX(-50%);
-}
-.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));
-  border: none;
-  border-bottom: 1px solid var(--g-color-line-generic);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
 .pc-feed-header-controls__filter-item {
   flex-grow: 1;
   min-width: 230px;

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

@@ -3,44 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 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 FilterInput_1 = tslib_1.__importDefault(require("../../Filters/FilterInput/FilterInput"));
+const FilterMultipleSelect_1 = tslib_1.__importDefault(require("../../Filters/FilterMultipleSelect/FilterMultipleSelect"));
+const FilterSelect_1 = tslib_1.__importDefault(require("../../Filters/FilterSelect/FilterSelect"));
+const i18n_1 = require("../i18n");
 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(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(',');
-        onChange(asString);
-    };
-    const valueLocal = (0, react_1.useMemo)(() => (value ? [...value.split(',')] : []), [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, 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)(feedHeaderContext_1.FeedHeaderFunctionsContext);
     const handleChangeFilter = (0, react_1.useCallback)((data) => {
@@ -48,11 +17,14 @@ const Filter = ({ name, type, value, label, items, }) => {
     }, [name, onChangeFilter]);
     switch (type) {
         case 'input':
-            return react_1.default.createElement(FilterInput, { label: label, value: value, onChange: handleChangeFilter });
+            return (react_1.default.createElement("div", { className: b('filter-item') },
+                react_1.default.createElement(FilterInput_1.default, { label: label, value: value, onChange: handleChangeFilter, clearText: (0, i18n_1.i18n)('clear') })));
         case 'multiple-select':
-            return (react_1.default.createElement(FilterMultipleSelect, { label: label, items: items, value: value, onChange: handleChangeFilter }));
+            return (react_1.default.createElement("div", { className: b('filter-item') },
+                react_1.default.createElement(FilterMultipleSelect_1.default, { label: label, items: items, value: value, onChange: handleChangeFilter, filterText: (0, i18n_1.i18n)('search') })));
         case 'select':
-            return (react_1.default.createElement(FilterSelect, { label: label, items: items, value: value, onChange: handleChangeFilter }));
+            return (react_1.default.createElement("div", { className: b('filter-item') },
+                react_1.default.createElement(FilterSelect_1.default, { label: label, items: items, value: value, onChange: handleChangeFilter })));
         default:
             return null;
     }

package/build/cjs/components/Filters/FilterInput/FilterInput.css

@@ -0,0 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-filter-input {
+  width: 100%;
+}

package/build/cjs/components/Filters/FilterInput/FilterInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ value, onChange, label, clearText, }: {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string | undefined;
+    clearText?: string | undefined;
+}) => JSX.Element>;
+export default _default;

package/build/cjs/components/Filters/FilterInput/FilterInput.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const Search_1 = require("../Search/Search");
+const b = (0, utils_1.block)('filter-input');
+const FilterInput = ({ value, onChange, label, clearText, }) => (react_1.default.createElement(Search_1.Search, { className: b('filter-input'), placeholder: label, initialValue: value, onSubmit: onChange, clearText: clearText }));
+exports.default = react_1.default.memo(FilterInput);

package/build/cjs/components/Filters/FilterMultipleSelect/FilterMultipleSelect.css

@@ -0,0 +1,47 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-filter-multiple-select {
+  width: 100%;
+}
+.pc-filter-multiple-select__popup {
+  max-height: 500px;
+  border-radius: 12px;
+}
+.pc-filter-multiple-select__popup .g-select-list::-webkit-scrollbar {
+  display: none;
+}
+.pc-filter-multiple-select__popup .g-select-list .g-list {
+  max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
+}
+.pc-filter-multiple-select__popup .g-list__item {
+  margin: 4px;
+  border-radius: 8px;
+}
+.pc-filter-multiple-select__popup_mobile {
+  max-height: inherit;
+}
+.pc-filter-multiple-select__popup_mobile .pc-filter-multiple-select__popup-filter {
+  position: relative;
+  border: none;
+}
+.pc-filter-multiple-select__popup_mobile .pc-filter-multiple-select__popup-filter::before {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  width: 100vw;
+  height: 2px;
+  content: "";
+  border-bottom: 2px solid var(--g-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  transform: translateX(-50%);
+}
+.pc-filter-multiple-select__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));
+  border: none;
+  border-bottom: 1px solid var(--g-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/build/cjs/components/Filters/FilterMultipleSelect/FilterMultipleSelect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FeedHeaderOption } from '../../../context/feedHeaderContext';
+declare const _default: React.MemoExoticComponent<({ label, value, onChange, items, filterText, }: {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string | undefined;
+    items?: FeedHeaderOption[] | undefined;
+    filterText?: string | undefined;
+}) => JSX.Element>;
+export default _default;

package/build/cjs/components/Filters/FilterMultipleSelect/FilterMultipleSelect.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const mobileContext_1 = require("../../../context/mobileContext");
+const utils_1 = require("../../../utils");
+const customRenders_1 = require("../customRenders");
+const b = (0, utils_1.block)('filter-multiple-select');
+const VIRTUALIZATION_THRESHOLD = 1000;
+const FilterMultipleSelect = ({ label, value, onChange, items = [], filterText, }) => {
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const handleUpdate = (selected) => {
+        const asString = selected.join(',');
+        onChange(asString);
+    };
+    const valueLocal = (0, react_1.useMemo)(() => (value ? [...value.split(',')] : []), [value]);
+    return (react_1.default.createElement(uikit_1.Select, { className: b(), 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, renderFilter: (0, customRenders_1.renderFilter)({
+            placeholder: filterText,
+            className: b('popup-filter'),
+        }), multiple: true, filterable: true, hasClear: true }));
+};
+exports.default = react_1.default.memo(FilterMultipleSelect);

package/build/cjs/components/Filters/FilterSelect/FilterSelect.css

@@ -0,0 +1,22 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-filter-select {
+  width: 100%;
+}
+.pc-filter-select__popup {
+  max-height: 500px;
+  border-radius: 12px;
+}
+.pc-filter-select__popup .g-select-list::-webkit-scrollbar {
+  display: none;
+}
+.pc-filter-select__popup .g-select-list .g-list {
+  max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
+}
+.pc-filter-select__popup .g-list__item {
+  margin: 4px;
+  border-radius: 8px;
+}
+.pc-filter-select__popup_mobile {
+  max-height: inherit;
+}

package/build/cjs/components/Filters/FilterSelect/FilterSelect.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FeedHeaderOption } from '../../../context/feedHeaderContext';
+declare const _default: React.MemoExoticComponent<({ label, value, onChange, items, }: {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string | undefined;
+    items?: FeedHeaderOption[] | undefined;
+}) => JSX.Element>;
+export default _default;

package/build/cjs/components/Filters/FilterSelect/FilterSelect.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const mobileContext_1 = require("../../../context/mobileContext");
+const utils_1 = require("../../../utils");
+const customRenders_1 = require("../customRenders");
+const b = (0, utils_1.block)('filter-select');
+const VIRTUALIZATION_THRESHOLD = 1000;
+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(uikit_1.Select, { className: b(), 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 }));
+};
+exports.default = react_1.default.memo(FilterSelect);

package/build/cjs/components/Filters/FilterSelects/FilterSelects.css

@@ -0,0 +1,13 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-filter-selects {
+  margin-bottom: 32px;
+  gap: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.pc-filter-selects__select {
+  width: 240px;
+  --pc-color-border-switcher: var(--g-color-private-cool-grey-400-solid);
+  --pc-color-border-switcher-hover: var(--g-color-private-cool-grey-600-solid);
+}

package/build/cjs/components/Filters/FilterSelects/FilterSelects.d.ts

@@ -0,0 +1,8 @@
+import { SelectProps } from '../../../models';
+interface FilterSelectsProps {
+    selects: SelectProps[];
+    filters: Record<string, string>;
+    handleChange: (name: string, value: string) => void;
+}
+export declare const FilterSelects: ({ selects, filters, handleChange }: FilterSelectsProps) => JSX.Element | null;
+export default FilterSelects;

package/build/cjs/components/Filters/FilterSelects/FilterSelects.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSelects = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../utils");
+const FilterSelect_1 = tslib_1.__importDefault(require("../FilterSelect/FilterSelect"));
+const b = (0, utils_1.block)('filter-selects');
+const SelectItem = ({ name, value, items, handleChange, }) => {
+    const handleChangeLocal = (0, react_1.useCallback)((data) => handleChange(name, data), [handleChange, name]);
+    return react_1.default.createElement(FilterSelect_1.default, { value: value, items: items, onChange: handleChangeLocal });
+};
+const FilterSelects = ({ selects, filters, handleChange }) => {
+    if (!selects.length)
+        return null;
+    return (react_1.default.createElement("div", { className: b() }, selects.map(({ name, options }) => (react_1.default.createElement("div", { className: b('select'), key: name },
+        react_1.default.createElement(SelectItem, { name: name, items: options, value: filters[name], handleChange: handleChange }))))));
+};
+exports.FilterSelects = FilterSelects;
+exports.default = exports.FilterSelects;

package/build/cjs/components/{FeedHeader → Filters}/Search/Search.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-feed-header-search {
+.pc-filter-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-feed-header-search__input-icon {
+.pc-filter-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-feed-header-search__suggest {
+.pc-filter-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-feed-header-search__suggest:hover, .pc-feed-header-search__suggest:focus {
+.pc-filter-search__suggest:hover, .pc-filter-search__suggest:focus {
   border: 1px solid var(--g-color-base-generic-hover);
 }
-.pc-feed-header-search__control.pc-feed-header-search__control {
+.pc-filter-search__control.pc-filter-search__control {
   padding-right: 32px;
   padding-left: 12px;
 }
 
-.pc-feed-header-search_size_s {
+.pc-filter-search_size_s {
   --bc-text-input-border-radius: var(--g-border-radius-l);
   width: 352px;
   max-width: 100%;
   height: 36px;
 }
-.pc-feed-header-search_size_m {
+.pc-filter-search_size_m {
   --bc-text-input-border-radius: var(--g-border-radius-xl);
 }

package/build/cjs/components/{FeedHeader → Filters}/Search/Search.d.ts

@@ -6,6 +6,7 @@ type SearchProps = {
     debounce?: number;
     placeholder?: string;
     size?: SearchSize;
+    clearText?: string;
 };
-export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, }: SearchProps) => JSX.Element;
+export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, clearText, }: SearchProps) => JSX.Element;
 export default Search;

package/build/cjs/components/{FeedHeader → Filters}/Search/Search.js

@@ -8,11 +8,10 @@ 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)('feed-header-search');
+const b = (0, utils_1.block)('filter-search');
 const SEARCH_ICON_SIZE = 16;
 const CLOSE_ICON_SIZE = 12;
-const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder, size = 'm', }) => {
+const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder, size = 'm', clearText, }) => {
     const handleChange = (0, debounce_1.default)(onSubmit, debounce);
     const [isSetInitValue, setIsSetInitValue] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(initialValue);
@@ -34,8 +33,8 @@ const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [value, handleChange, onSubmit]);
-    const rightContent = (0, react_1.useMemo)(() => (react_1.default.createElement("button", { className: b('input-icon'), onClick: handleClick, "aria-label": (0, i18n_1.i18n)('clear'), disabled: !value },
-        react_1.default.createElement(uikit_1.Icon, { data: iconData, size: iconSize }))), [handleClick, value, iconData, iconSize]);
+    const rightContent = (0, react_1.useMemo)(() => (react_1.default.createElement("button", { className: b('input-icon'), onClick: handleClick, "aria-label": clearText, disabled: !value },
+        react_1.default.createElement(uikit_1.Icon, { data: iconData, size: iconSize }))), [handleClick, value, iconData, iconSize, clearText]);
     const handleUpdate = (0, react_1.useCallback)((query) => {
         setValue(query);
         handleChange(query);

package/build/cjs/components/{FeedHeader → Filters}/SelectOption/SelectOption.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-feed-header-select-option {
+.pc-filter-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));

package/build/cjs/components/{FeedHeader → Filters}/SelectOption/SelectOption.js

@@ -4,7 +4,7 @@ exports.SelectOption = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
-const b = (0, utils_1.block)('feed-header-select-option');
+const b = (0, utils_1.block)('filter-select-option');
 const SelectOption = ({ data }) => {
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("span", null, data.content)));