@doyourjob/gravity-ui-page-constructor 5.31.84 → 5.31.86

package/build/cjs/blocks/Header/SwitchingTitle/SwitchingTtitle.js

@@ -9,23 +9,26 @@ const SwitchingTitle = (props) => {
     const { text, switchingTime } = props;
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const [opacity, setOpacity] = (0, react_1.useState)(1);
+    const timeoutsRef = (0, react_1.useRef)([]);
     const texts = (0, react_1.useMemo)(() => (0, utils_2.partitionSwitchingTitleInput)(text), [text]);
     const textSizesCommonMultiple = (0, react_1.useMemo)(() => texts.reduce((acc, curr) => acc * curr.length, 1), [texts]);
+    const clearAllTimeouts = () => {
+        timeoutsRef.current.forEach(clearTimeout);
+        timeoutsRef.current = [];
+    };
     (0, react_1.useEffect)(() => {
-        const timeouts = [];
+        clearAllTimeouts();
         const intervalHandle = setInterval(() => {
             setOpacity(0);
             const timeout = setTimeout(() => {
                 setCurrentIndex((c) => (c + 1) % textSizesCommonMultiple);
                 setOpacity(1);
             }, 200);
-            timeouts.push(timeout);
+            timeoutsRef.current.push(timeout);
         }, switchingTime);
         return () => {
             clearInterval(intervalHandle);
-            for (const timeout of timeouts) {
-                clearTimeout(timeout);
-            }
+            clearAllTimeouts();
         };
     }, [texts, switchingTime, textSizesCommonMultiple]);
     return (react_1.default.createElement("span", null, texts.map((lines, index) => (react_1.default.createElement("span", { className: b('title-part'), style: {

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

@@ -1,13 +1,22 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-reports-block {
+  display: flex;
+  flex-direction: column;
+}
 .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;
+  height: 48px;
+}
+.pc-reports-block__loader > div {
+  border-color: var(--pc-color-progress-circular);
+}
+.pc-reports-block__paginator {
+  margin-top: 32px;
 }
 .pc-reports-block__items {
   margin: 0;

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

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportsBlock = void 0;
 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 types_1 = require("../../components/Paginator/types");
+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"));
@@ -39,7 +40,7 @@ const ReportsBlock = ({ title, typeKey, empty }) => {
         : title, [title]);
     const renderItems = (0, react_1.useMemo)(() => {
         if (loading) {
-            return react_1.default.createElement(components_1.ProgressCircular, null);
+            return react_1.default.createElement(uikit_1.Spin, { size: "xl", className: b('loader') });
         }
         if (!paginatedItems.length) {
             return react_1.default.createElement(components_1.EmptyPlug, { empty: empty });
@@ -47,23 +48,11 @@ const ReportsBlock = ({ title, typeKey, empty }) => {
         return (react_1.default.createElement("ul", { className: b('items') }, paginatedItems.map((item, index) => (react_1.default.createElement("li", { key: index },
             react_1.default.createElement(ReportsItem_1.default, Object.assign({}, item, { filesOutline: filesOutline })))))));
     }, [empty, filesOutline, loading, paginatedItems]);
-    const handlePageChange = (0, react_1.useCallback)((index) => {
-        switch (index) {
-            case types_1.ArrowType.Prev:
-                setPage((prev) => prev - 1);
-                break;
-            case types_1.ArrowType.Next:
-                setPage((prev) => prev + 1);
-                break;
-            default:
-                setPage(index);
-        }
-    }, []);
     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: handlePageChange }))));
+        itemsPerPage && (react_1.default.createElement(components_1.Paginator, { page: page, itemsPerPage: itemsPerPage, totalItems: filteredItems.length, maxPages: Infinity, onPageChange: setPage, className: b('paginator') }))));
 };
 exports.ReportsBlock = ReportsBlock;
 exports.default = exports.ReportsBlock;

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/Item/Item.css

@@ -4,9 +4,11 @@ unpredictable css rules order in build */
   padding: 24px 0;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--g-color-private-black-100-solid);
   gap: 32px;
 }
+.pc-reports-sections-item + .pc-reports-sections-item {
+  border-top: 1px solid var(--g-color-private-black-100-solid);
+}
 .pc-reports-sections-item__wrap {
   flex: 1;
 }

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

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../../components");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('reports-sections-item');
-const Item = ({ title, files = [] }) => (react_1.default.createElement("div", { className: b() },
+const Item = ({ title, files = [] }) => (react_1.default.createElement("li", { className: b() },
     react_1.default.createElement("div", { className: b('wrap') },
         react_1.default.createElement("div", { className: b('title') }, title)),
     Boolean(files.length) && (react_1.default.createElement("ul", { className: b('files') }, files.map((file) => (react_1.default.createElement("li", { key: file.link },

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/ReportsSections/Section/Section.js

@@ -9,7 +9,6 @@ const b = (0, utils_1.block)('reports-sections-section');
 const Section = ({ title, date, items = [] }) => (react_1.default.createElement("div", { className: b() },
     date && react_1.default.createElement("div", { className: b('date') }, date),
     title && react_1.default.createElement("h2", { className: b('title') }, title),
-    Boolean(items.length) && (react_1.default.createElement("ul", { className: b('files') }, items.map((item, index) => (react_1.default.createElement("li", { key: index },
-        react_1.default.createElement(Item_1.default, Object.assign({}, item)))))))));
+    Boolean(items.length) && (react_1.default.createElement("ul", { className: b('files') }, items.map((item, index) => (react_1.default.createElement(Item_1.default, Object.assign({ key: index }, item))))))));
 exports.Section = Section;
 exports.default = exports.Section;

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/{esm/components/FeedHeader → cjs/components/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);