@gravity-ui/blog-constructor 10.1.0 → 10.1.1-alpha.1

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

@@ -11,6 +11,7 @@ const SavedOnlyFilter_1 = require("../SavedOnlyFilter/SavedOnlyFilter.js");
 const SearchFilter_1 = require("../SearchFilter/SearchFilter.js");
 const SelectFilter_1 = require("../SelectFilter/SelectFilter.js");
 const b = (0, cn_1.block)('filter-control');
+const resolveAnalyticsEvents = (analyticsEvents, data) => typeof analyticsEvents === 'function' ? analyticsEvents(data) : analyticsEvents;
 const FilterControl = ({ filter, initialValue, onChange }) => {
     const handleAnalytics = (0, page_constructor_1.useAnalytics)();
     const { hasLikes } = React.useContext(LikesContext_1.LikesContext);
@@ -21,18 +22,28 @@ const FilterControl = ({ filter, initialValue, onChange }) => {
         onChange(query);
     }, [filter.analyticsEvents, handleAnalytics, onChange]);
     if (filter.type === 'search') {
-        const { queryParamName, placeholder } = filter;
-        return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SearchFilter_1.SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
+        const { queryParamName, placeholder, clickAnalyticsEvents } = filter;
+        return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SearchFilter_1.SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onClick: clickAnalyticsEvents
+                    ? () => handleAnalytics(clickAnalyticsEvents)
+                    : undefined }) }));
     }
     if (filter.type === 'savedOnly') {
-        const { queryParamName } = filter;
+        const { queryParamName, clickAnalyticsEvents } = filter;
         if (!hasLikes) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)("div", { className: b({ 'width-auto': true }), children: (0, jsx_runtime_1.jsx)(SavedOnlyFilter_1.SavedOnlyFilter, { initialValue: initialValue === 'true', onChange: (value) => handleChange({ [queryParamName]: value ? 'true' : '', search: '' }) }) }));
+        const handleSavedOnlyChange = (value) => {
+            if (clickAnalyticsEvents) {
+                handleAnalytics(resolveAnalyticsEvents(clickAnalyticsEvents, value));
+            }
+            handleChange({ [queryParamName]: value ? 'true' : '', search: '' });
+        };
+        return ((0, jsx_runtime_1.jsx)("div", { className: b({ 'width-auto': true }), children: (0, jsx_runtime_1.jsx)(SavedOnlyFilter_1.SavedOnlyFilter, { initialValue: initialValue === 'true', onChange: handleSavedOnlyChange }) }));
     }
-    const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa } = filter;
-    return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SelectFilter_1.SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
+    const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa, openAnalyticsEvents, closeAnalyticsEvents, } = filter;
+    return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SelectFilter_1.SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onOpen: openAnalyticsEvents ? () => handleAnalytics(openAnalyticsEvents) : undefined, onClose: closeAnalyticsEvents
+                ? (data) => handleAnalytics(resolveAnalyticsEvents(closeAnalyticsEvents, data))
+                : undefined }) }));
 };
 exports.FilterControl = FilterControl;
 //# sourceMappingURL=FilterControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,mEAA0D;AAE1D,uEAA+D;AAQ/D,gDAA2C;AAC3C,2EAAmE;AACnE,kEAA0D;AAC1D,kEAA0D;AAI1D,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,gBAAgB,CAAC,CAAC;AAQ3B,MAAM,aAAa,GAAG,CAAC,EAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,IAAA,+BAAY,GAAE,CAAC;IACvC,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAY,EAAE,EAAE;QACb,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YACzB,eAAe,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,CAAC,CACtD,CAAC;IAEF,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,EAAC,cAAc,EAAE,WAAW,EAAC,GAAG,MAA4B,CAAC;QACnE,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,2BAAY,IACT,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAkC,EAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAU,CAAC,GACvE,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;QAC9B,MAAM,EAAC,cAAc,EAAC,GAAG,MAA+B,CAAC;QAEzD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,YAAY,EAAE,IAAI,EAAC,CAAC,YACnC,uBAAC,iCAAe,IACZ,YAAY,EAAE,YAAY,KAAK,MAAM,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAChB,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAU,CAAC,GAEhF,GACA,CACT,CAAC;IACN,CAAC;IAED,MAAM,EAAC,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAC,GACtF,MAA4B,CAAC;IAEjC,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,2BAAY,IACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAiC,EAC9C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAU,CAAC,GACvE,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAhEW,QAAA,aAAa,iBAgExB","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '@gravity-ui/page-constructor';\n\nimport {LikesContext} from '../../../../contexts/LikesContext';\nimport {\n    FilterConfig,\n    Query,\n    SavedOnlyFilterConfig,\n    SearchFilterConfig,\n    SelectFilterConfig,\n} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\nimport {SavedOnlyFilter} from '../SavedOnlyFilter/SavedOnlyFilter';\nimport {SearchFilter} from '../SearchFilter/SearchFilter';\nimport {SelectFilter} from '../SelectFilter/SelectFilter';\n\nimport './FilterControl.scss';\n\nconst b = block('filter-control');\n\nexport type FilterControlProps = {\n    filter: FilterConfig;\n    initialValue: string | number | null | undefined;\n    onChange: (query: Query) => void;\n};\n\nexport const FilterControl = ({filter, initialValue, onChange}: FilterControlProps) => {\n    const handleAnalytics = useAnalytics();\n    const {hasLikes} = React.useContext(LikesContext);\n\n    const handleChange = React.useCallback(\n        (query: Query) => {\n            if (filter.analyticsEvents) {\n                handleAnalytics(filter.analyticsEvents);\n            }\n            onChange(query);\n        },\n        [filter.analyticsEvents, handleAnalytics, onChange],\n    );\n\n    if (filter.type === 'search') {\n        const {queryParamName, placeholder} = filter as SearchFilterConfig;\n        return (\n            <div className={b()}>\n                <SearchFilter\n                    placeholder={placeholder}\n                    initialValue={initialValue as string | undefined}\n                    onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n                />\n            </div>\n        );\n    }\n\n    if (filter.type === 'savedOnly') {\n        const {queryParamName} = filter as SavedOnlyFilterConfig;\n\n        if (!hasLikes) {\n            return null;\n        }\n\n        return (\n            <div className={b({'width-auto': true})}>\n                <SavedOnlyFilter\n                    initialValue={initialValue === 'true'}\n                    onChange={(value) =>\n                        handleChange({[queryParamName]: value ? 'true' : '', search: ''} as Query)\n                    }\n                />\n            </div>\n        );\n    }\n\n    const {queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa} =\n        filter as SelectFilterConfig;\n\n    return (\n        <div className={b()}>\n            <SelectFilter\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear}\n                placeholder={placeholder as string | undefined}\n                options={options}\n                allLabel={allLabel}\n                qa={qa}\n                initialValue={initialValue}\n                onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,mEAA0D;AAE1D,uEAA+D;AAS/D,gDAA2C;AAC3C,2EAAmE;AACnE,kEAA0D;AAC1D,kEAA0D;AAI1D,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,sBAAsB,GAAG,CAAK,eAA8C,EAAE,IAAO,EAAE,EAAE,CAC3F,OAAO,eAAe,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;AAQ7E,MAAM,aAAa,GAAG,CAAC,EAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,IAAA,+BAAY,GAAE,CAAC;IACvC,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAY,EAAE,EAAE;QACb,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YACzB,eAAe,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,CAAC,CACtD,CAAC;IAEF,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,EAAC,cAAc,EAAE,WAAW,EAAE,oBAAoB,EAAC,GAAG,MAA4B,CAAC;QAEzF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,2BAAY,IACT,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAkC,EAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAU,CAAC,EACrE,OAAO,EACH,oBAAoB;oBAChB,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,oBAAoB,CAAC;oBAC7C,CAAC,CAAC,SAAS,GAErB,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;QAC9B,MAAM,EAAC,cAAc,EAAE,oBAAoB,EAAC,GAAG,MAA+B,CAAC;QAE/E,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,qBAAqB,GAAG,CAAC,KAAc,EAAE,EAAE;YAC7C,IAAI,oBAAoB,EAAE,CAAC;gBACvB,eAAe,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC,CAAC;YACzE,CAAC;YACD,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAU,CAAC,CAAC;QAC/E,CAAC,CAAC;QAEF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,YAAY,EAAE,IAAI,EAAC,CAAC,YACnC,uBAAC,iCAAe,IACZ,YAAY,EAAE,YAAY,KAAK,MAAM,EACrC,QAAQ,EAAE,qBAAqB,GACjC,GACA,CACT,CAAC;IACN,CAAC;IAED,MAAM,EACF,cAAc,EACd,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,EAAE,EACF,mBAAmB,EACnB,oBAAoB,GACvB,GAAG,MAA4B,CAAC;IAEjC,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,2BAAY,IACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAiC,EAC9C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAU,CAAC,EACrE,MAAM,EACF,mBAAmB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,EAEhF,OAAO,EACH,oBAAoB;gBAChB,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CACL,eAAe,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;gBACzE,CAAC,CAAC,SAAS,GAErB,GACA,CACT,CAAC;AACN,CAAC,CAAC;AA9FW,QAAA,aAAa,iBA8FxB","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '@gravity-ui/page-constructor';\n\nimport {LikesContext} from '../../../../contexts/LikesContext';\nimport {\n    DynamicAnalyticsEventsProp,\n    FilterConfig,\n    Query,\n    SavedOnlyFilterConfig,\n    SearchFilterConfig,\n    SelectFilterConfig,\n} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\nimport {SavedOnlyFilter} from '../SavedOnlyFilter/SavedOnlyFilter';\nimport {SearchFilter} from '../SearchFilter/SearchFilter';\nimport {SelectFilter} from '../SelectFilter/SelectFilter';\n\nimport './FilterControl.scss';\n\nconst b = block('filter-control');\n\nconst resolveAnalyticsEvents = <T,>(analyticsEvents: DynamicAnalyticsEventsProp<T>, data: T) =>\n    typeof analyticsEvents === 'function' ? analyticsEvents(data) : analyticsEvents;\n\nexport type FilterControlProps = {\n    filter: FilterConfig;\n    initialValue: string | number | null | undefined;\n    onChange: (query: Query) => void;\n};\n\nexport const FilterControl = ({filter, initialValue, onChange}: FilterControlProps) => {\n    const handleAnalytics = useAnalytics();\n    const {hasLikes} = React.useContext(LikesContext);\n\n    const handleChange = React.useCallback(\n        (query: Query) => {\n            if (filter.analyticsEvents) {\n                handleAnalytics(filter.analyticsEvents);\n            }\n            onChange(query);\n        },\n        [filter.analyticsEvents, handleAnalytics, onChange],\n    );\n\n    if (filter.type === 'search') {\n        const {queryParamName, placeholder, clickAnalyticsEvents} = filter as SearchFilterConfig;\n\n        return (\n            <div className={b()}>\n                <SearchFilter\n                    placeholder={placeholder}\n                    initialValue={initialValue as string | undefined}\n                    onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n                    onClick={\n                        clickAnalyticsEvents\n                            ? () => handleAnalytics(clickAnalyticsEvents)\n                            : undefined\n                    }\n                />\n            </div>\n        );\n    }\n\n    if (filter.type === 'savedOnly') {\n        const {queryParamName, clickAnalyticsEvents} = filter as SavedOnlyFilterConfig;\n\n        if (!hasLikes) {\n            return null;\n        }\n\n        const handleSavedOnlyChange = (value: boolean) => {\n            if (clickAnalyticsEvents) {\n                handleAnalytics(resolveAnalyticsEvents(clickAnalyticsEvents, value));\n            }\n            handleChange({[queryParamName]: value ? 'true' : '', search: ''} as Query);\n        };\n\n        return (\n            <div className={b({'width-auto': true})}>\n                <SavedOnlyFilter\n                    initialValue={initialValue === 'true'}\n                    onChange={handleSavedOnlyChange}\n                />\n            </div>\n        );\n    }\n\n    const {\n        queryParamName,\n        multiple,\n        filterable,\n        hasClear,\n        placeholder,\n        options,\n        allLabel,\n        qa,\n        openAnalyticsEvents,\n        closeAnalyticsEvents,\n    } = filter as SelectFilterConfig;\n\n    return (\n        <div className={b()}>\n            <SelectFilter\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear}\n                placeholder={placeholder as string | undefined}\n                options={options}\n                allLabel={allLabel}\n                qa={qa}\n                initialValue={initialValue}\n                onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n                onOpen={\n                    openAnalyticsEvents ? () => handleAnalytics(openAnalyticsEvents) : undefined\n                }\n                onClose={\n                    closeAnalyticsEvents\n                        ? (data) =>\n                              handleAnalytics(resolveAnalyticsEvents(closeAnalyticsEvents, data))\n                        : undefined\n                }\n            />\n        </div>\n    );\n};\n"]}

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

@@ -2,6 +2,7 @@ export type SearchFilterProps = {
     placeholder?: string;
     initialValue: string | undefined;
     onChange: (value: string) => void;
+    onClick?: () => void;
     className?: string;
 };
-export declare const SearchFilter: ({ placeholder, initialValue, onChange, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchFilter: ({ placeholder, initialValue, onChange, onClick, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,8 +6,8 @@ const i18n_1 = require("../../../../i18n/index.js");
 const cn_1 = require("../../../../utils/cn.js");
 const Search_1 = require("../../../Search/Search.js");
 const b = (0, cn_1.block)('search-filter');
-const SearchFilter = ({ placeholder, initialValue, onChange, className, }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Search_1.Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : (0, i18n_1.i18n)(i18n_1.Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange }) }));
+const SearchFilter = ({ placeholder, initialValue, onChange, onClick, className, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Search_1.Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : (0, i18n_1.i18n)(i18n_1.Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange, onClick: onClick }) }));
 };
 exports.SearchFilter = SearchFilter;
 //# sourceMappingURL=SearchFilter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";;;;AAAA,oDAA8C;AAC9C,gDAA2C;AAC3C,sDAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,eAAe,CAAC,CAAC;AAS1B,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,SAAS,GACO,EAAE,EAAE;IACpB,OAAO,CACH,gCAAK,SAAS,EAAE,SAAS,YACrB,uBAAC,eAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAA,WAAI,EAAC,aAAM,CAAC,MAAM,CAAC,EAC/C,YAAY,EAAE,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClF,QAAQ,EAAE,QAAQ,GACpB,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,YAAY,gBAgBvB","sourcesContent":["import {Keyset, i18n} from '../../../../i18n';\nimport {block} from '../../../../utils/cn';\nimport {Search} from '../../../Search/Search';\n\nimport './SearchFilter.scss';\n\nconst b = block('search-filter');\n\nexport type SearchFilterProps = {\n    placeholder?: string;\n    initialValue: string | undefined;\n    onChange: (value: string) => void;\n    className?: string;\n};\n\nexport const SearchFilter = ({\n    placeholder,\n    initialValue,\n    onChange,\n    className,\n}: SearchFilterProps) => {\n    return (\n        <div className={className}>\n            <Search\n                className={b('search')}\n                placeholder={placeholder ?? i18n(Keyset.Search)}\n                initialValue={initialValue && typeof initialValue === 'string' ? initialValue : ''}\n                onSubmit={onChange}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";;;;AAAA,oDAA8C;AAC9C,gDAA2C;AAC3C,sDAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,eAAe,CAAC,CAAC;AAU1B,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACO,EAAE,EAAE;IACpB,OAAO,CACH,gCAAK,SAAS,EAAE,SAAS,YACrB,uBAAC,eAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAA,WAAI,EAAC,aAAM,CAAC,MAAM,CAAC,EAC/C,YAAY,EAAE,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAClB,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAlBW,QAAA,YAAY,gBAkBvB","sourcesContent":["import {Keyset, i18n} from '../../../../i18n';\nimport {block} from '../../../../utils/cn';\nimport {Search} from '../../../Search/Search';\n\nimport './SearchFilter.scss';\n\nconst b = block('search-filter');\n\nexport type SearchFilterProps = {\n    placeholder?: string;\n    initialValue: string | undefined;\n    onChange: (value: string) => void;\n    onClick?: () => void;\n    className?: string;\n};\n\nexport const SearchFilter = ({\n    placeholder,\n    initialValue,\n    onChange,\n    onClick,\n    className,\n}: SearchFilterProps) => {\n    return (\n        <div className={className}>\n            <Search\n                className={b('search')}\n                placeholder={placeholder ?? i18n(Keyset.Search)}\n                initialValue={initialValue && typeof initialValue === 'string' ? initialValue : ''}\n                onSubmit={onChange}\n                onClick={onClick}\n            />\n        </div>\n    );\n};\n"]}

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

@@ -1,4 +1,5 @@
 import { SelectOption } from '@gravity-ui/uikit';
+import { SelectFilterCloseData } from "../../../../models/common.js";
 export type SelectFilterProps = {
     multiple?: boolean;
     filterable?: boolean;
@@ -9,6 +10,8 @@ export type SelectFilterProps = {
     qa?: string;
     initialValue: string | number | null | undefined;
     onChange: (value: string) => void;
+    onOpen?: () => void;
+    onClose?: (data: SelectFilterCloseData) => void;
     className?: string;
 };
-export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,28 +10,57 @@ const cn_1 = require("../../../../utils/cn.js");
 const customRenders_1 = require("./customRenders.js");
 const b = (0, cn_1.block)('feed-filter');
 const VIRTUALIZATION_THRESHOLD = 1000;
-const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }) => {
+const getSelectedValuesChangesCount = (initial, current) => {
+    const initialValues = new Set(initial);
+    const currentValues = new Set(current);
+    const removedValuesCount = initial.filter((value) => !currentValues.has(value)).length;
+    const addedValuesCount = current.filter((value) => !initialValues.has(value)).length;
+    return removedValuesCount + addedValuesCount;
+};
+const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }) => {
     const isMobile = React.useContext(MobileContext_1.MobileContext);
     let defaultValue;
     if (multiple) {
         defaultValue = initialValue ? initialValue.split(',') : [];
     }
     else {
-        defaultValue = [initialValue];
+        defaultValue =
+            initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];
     }
+    const selectedValuesRef = React.useRef(defaultValue);
+    const selectedValuesOnOpenRef = React.useRef(defaultValue);
+    const isOpenRef = React.useRef(false);
     const optionsWithEmpty = multiple
         ? options
         : [{ value: 'empty', content: allLabel }, ...options];
     const handleChange = (selectedValues) => {
         if (multiple) {
+            selectedValuesRef.current = selectedValues;
             onChange(selectedValues.join(','));
         }
         else {
             const isEmpty = selectedValues.some((v) => v === 'empty');
+            selectedValuesRef.current = isEmpty ? [] : selectedValues;
             onChange(isEmpty ? '' : selectedValues[0]);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { className: b('select'), size: "xl", multiple: multiple, filterable: filterable, hasClear: hasClear !== null && hasClear !== void 0 ? hasClear : multiple, disablePortal: true, options: optionsWithEmpty, defaultValue: defaultValue, popupClassName: b('popup', { isMobile }), onUpdate: handleChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : allLabel, renderControl: (0, customRenders_1.renderSwitcher)({
+    const handleOpenChange = (isOpen) => {
+        if (isOpen) {
+            selectedValuesOnOpenRef.current = [...selectedValuesRef.current];
+            isOpenRef.current = true;
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            return;
+        }
+        if (isOpenRef.current) {
+            const selectedValues = [...selectedValuesRef.current];
+            onClose === null || onClose === void 0 ? void 0 : onClose({
+                selectedValues,
+                changesCount: getSelectedValuesChangesCount(selectedValuesOnOpenRef.current, selectedValues),
+            });
+        }
+        isOpenRef.current = false;
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { className: b('select'), size: "xl", multiple: multiple, filterable: filterable, hasClear: hasClear !== null && hasClear !== void 0 ? hasClear : multiple, disablePortal: true, options: optionsWithEmpty, defaultValue: defaultValue, popupClassName: b('popup', { isMobile }), onUpdate: handleChange, onOpenChange: handleOpenChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : allLabel, renderControl: (0, customRenders_1.renderSwitcher)({
                 initial: defaultValue,
                 list: optionsWithEmpty,
                 defaultLabel: allLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAAuD;AAEvD,yEAAiE;AACjE,gDAA2C;AAE3C,sDAA2E;AAI3E,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,wBAAwB,GAAG,IAAI,CAAC;AAe/B,MAAM,YAAY,GAAG,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,EAAE,EACF,YAAY,EACZ,QAAQ,EACR,SAAS,GACO,EAAE,EAAE;IACpB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAEjD,IAAI,YAAsB,CAAC;IAC3B,IAAI,QAAQ,EAAE,CAAC;QACX,YAAY,GAAG,YAAY,CAAC,CAAC,CAAE,YAAuB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3E,CAAC;SAAM,CAAC;QACJ,YAAY,GAAG,CAAC,YAAY,CAAa,CAAC;IAC9C,CAAC;IAED,MAAM,gBAAgB,GAAmB,QAAQ;QAC7C,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,GAAG,OAAO,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CAAC,cAAwB,EAAE,EAAE;QAC9C,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;YAC1D,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,gCAAK,SAAS,EAAE,SAAS,YACrB,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ,EAC9B,aAAa,QACb,OAAO,EAAE,gBAAgB,EACzB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,CAAC,EACtC,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,EACpC,aAAa,EAAE,IAAA,8BAAc,EAAC;gBAC1B,OAAO,EAAE,YAAY;gBACrB,IAAI,EAAE,gBAAgB;gBACtB,YAAY,EAAE,QAAQ;gBACtB,EAAE;aACL,CAAC,EACF,uBAAuB,EAAE,wBAAwB,EACjD,YAAY,EAAE,4BAAY,EAC1B,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,IAAA,4BAAY,EAAC,EAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GACrF,GACA,CACT,CAAC;AACN,CAAC,CAAC;AA5DW,QAAA,YAAY,gBA4DvB","sourcesContent":["import * as React from 'react';\n\nimport {Select, SelectOption} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../../../contexts/MobileContext';\nimport {block} from '../../../../utils/cn';\n\nimport {renderFilter, renderOption, renderSwitcher} from './customRenders';\n\nimport './SelectFilter.scss';\n\nconst b = block('feed-filter');\n\nconst VIRTUALIZATION_THRESHOLD = 1000;\n\nexport type SelectFilterProps = {\n    multiple?: boolean;\n    filterable?: boolean;\n    hasClear?: boolean;\n    placeholder?: string;\n    options: SelectOption[];\n    allLabel: string;\n    qa?: string;\n    initialValue: string | number | null | undefined;\n    onChange: (value: string) => void;\n    className?: string;\n};\n\nexport const SelectFilter = ({\n    multiple,\n    filterable,\n    hasClear,\n    placeholder,\n    options,\n    allLabel,\n    qa,\n    initialValue,\n    onChange,\n    className,\n}: SelectFilterProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    let defaultValue: string[];\n    if (multiple) {\n        defaultValue = initialValue ? (initialValue as string).split(',') : [];\n    } else {\n        defaultValue = [initialValue] as string[];\n    }\n\n    const optionsWithEmpty: SelectOption[] = multiple\n        ? options\n        : [{value: 'empty', content: allLabel}, ...options];\n\n    const handleChange = (selectedValues: string[]) => {\n        if (multiple) {\n            onChange(selectedValues.join(','));\n        } else {\n            const isEmpty = selectedValues.some((v) => v === 'empty');\n            onChange(isEmpty ? '' : selectedValues[0]);\n        }\n    };\n\n    return (\n        <div className={className}>\n            <Select\n                className={b('select')}\n                size=\"xl\"\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear ?? multiple}\n                disablePortal\n                options={optionsWithEmpty}\n                defaultValue={defaultValue}\n                popupClassName={b('popup', {isMobile})}\n                onUpdate={handleChange}\n                placeholder={placeholder ?? allLabel}\n                renderControl={renderSwitcher({\n                    initial: defaultValue,\n                    list: optionsWithEmpty,\n                    defaultLabel: allLabel,\n                    qa,\n                })}\n                virtualizationThreshold={VIRTUALIZATION_THRESHOLD}\n                renderOption={renderOption}\n                renderFilter={filterable ? renderFilter({className: b('popup-filter')}) : undefined}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Select, SelectOption} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../../../contexts/MobileContext';\nimport {SelectFilterCloseData} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\n\nimport {renderFilter, renderOption, renderSwitcher} from './customRenders';\n\nimport './SelectFilter.scss';\n\nconst b = block('feed-filter');\n\nconst VIRTUALIZATION_THRESHOLD = 1000;\n\nexport type SelectFilterProps = {\n    multiple?: boolean;\n    filterable?: boolean;\n    hasClear?: boolean;\n    placeholder?: string;\n    options: SelectOption[];\n    allLabel: string;\n    qa?: string;\n    initialValue: string | number | null | undefined;\n    onChange: (value: string) => void;\n    onOpen?: () => void;\n    onClose?: (data: SelectFilterCloseData) => void;\n    className?: string;\n};\n\nconst getSelectedValuesChangesCount = (initial: string[], current: string[]) => {\n    const initialValues = new Set(initial);\n    const currentValues = new Set(current);\n\n    const removedValuesCount = initial.filter((value) => !currentValues.has(value)).length;\n    const addedValuesCount = current.filter((value) => !initialValues.has(value)).length;\n\n    return removedValuesCount + addedValuesCount;\n};\n\nexport const SelectFilter = ({\n    multiple,\n    filterable,\n    hasClear,\n    placeholder,\n    options,\n    allLabel,\n    qa,\n    initialValue,\n    onChange,\n    onOpen,\n    onClose,\n    className,\n}: SelectFilterProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    let defaultValue: string[];\n    if (multiple) {\n        defaultValue = initialValue ? (initialValue as string).split(',') : [];\n    } else {\n        defaultValue =\n            initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];\n    }\n\n    const selectedValuesRef = React.useRef(defaultValue);\n    const selectedValuesOnOpenRef = React.useRef(defaultValue);\n    const isOpenRef = React.useRef(false);\n\n    const optionsWithEmpty: SelectOption[] = multiple\n        ? options\n        : [{value: 'empty', content: allLabel}, ...options];\n\n    const handleChange = (selectedValues: string[]) => {\n        if (multiple) {\n            selectedValuesRef.current = selectedValues;\n            onChange(selectedValues.join(','));\n        } else {\n            const isEmpty = selectedValues.some((v) => v === 'empty');\n            selectedValuesRef.current = isEmpty ? [] : selectedValues;\n            onChange(isEmpty ? '' : selectedValues[0]);\n        }\n    };\n\n    const handleOpenChange = (isOpen: boolean) => {\n        if (isOpen) {\n            selectedValuesOnOpenRef.current = [...selectedValuesRef.current];\n            isOpenRef.current = true;\n            onOpen?.();\n            return;\n        }\n\n        if (isOpenRef.current) {\n            const selectedValues = [...selectedValuesRef.current];\n            onClose?.({\n                selectedValues,\n                changesCount: getSelectedValuesChangesCount(\n                    selectedValuesOnOpenRef.current,\n                    selectedValues,\n                ),\n            });\n        }\n\n        isOpenRef.current = false;\n    };\n\n    return (\n        <div className={className}>\n            <Select\n                className={b('select')}\n                size=\"xl\"\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear ?? multiple}\n                disablePortal\n                options={optionsWithEmpty}\n                defaultValue={defaultValue}\n                popupClassName={b('popup', {isMobile})}\n                onUpdate={handleChange}\n                onOpenChange={handleOpenChange}\n                placeholder={placeholder ?? allLabel}\n                renderControl={renderSwitcher({\n                    initial: defaultValue,\n                    list: optionsWithEmpty,\n                    defaultLabel: allLabel,\n                    qa,\n                })}\n                virtualizationThreshold={VIRTUALIZATION_THRESHOLD}\n                renderOption={renderOption}\n                renderFilter={filterable ? renderFilter({className: b('popup-filter')}) : undefined}\n            />\n        </div>\n    );\n};\n"]}

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ClassNameProps } from "../../models/common.js";
 export type SearchSize = 's' | 'm';
 interface SearchProps extends ClassNameProps {
@@ -8,6 +9,7 @@ interface SearchProps extends ClassNameProps {
     placeholder?: string;
     size?: SearchSize;
     autoFocus?: boolean;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
     className?: string;
 }
 /**
@@ -16,5 +18,5 @@ interface SearchProps extends ClassNameProps {
  *
  * @returns {JSX|null}
  */
-export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, onClick, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/cjs/components/Search/Search.js

@@ -20,7 +20,7 @@ const AUTOFOCUS_TIMEOUT = 0;
  *
  * @returns {JSX|null}
  */
-const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18n)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
+const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18n)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, onClick, value: externalValue, }) => {
     const onSubmitRef = React.useRef(onSubmit);
     onSubmitRef.current = onSubmit;
     const handleChange = React.useMemo(() => (0, debounce_1.default)((...args) => onSubmitRef.current(...args), debounce), [debounce]);
@@ -56,6 +56,7 @@ const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder
                 handleChange(query);
             }, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
                 className: b('search-suggest-control'),
+                onClick,
             }, endContent: rightContent }) }));
 };
 exports.Search = Search;

package/build/cjs/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Magnifier, Xmark} from '@gravity-ui/icons';\nimport {Icon, TextInput} from '@gravity-ui/uikit';\nimport lodashDebounce from 'lodash/debounce';\n\nimport {useIsIPhone} from '../../hooks/useIsIPhone';\nimport {Keyset, i18n} from '../../i18n';\nimport {ClassNameProps} from '../../models/common';\nimport {block} from '../../utils/cn';\n\nimport './Search.scss';\n\nconst b = block('search');\n\nexport type SearchSize = 's' | 'm';\n\ninterface SearchProps extends ClassNameProps {\n    value?: string;\n    initialValue: string;\n    onSubmit: (value: string) => void;\n    debounce?: number;\n    placeholder?: string;\n    size?: SearchSize;\n    autoFocus?: boolean;\n    className?: string;\n}\n\nconst SEARCH_ICON_SIZE = 16;\nconst CLOSE_ICON_SIZE = 20;\nconst AUTOFOCUS_TIMEOUT = 0;\n\n/**\n * Search component, placed on blog main page,\n * based on TextInput from uikit\n *\n * @returns {JSX|null}\n */\nexport const Search = ({\n    className,\n    initialValue,\n    onSubmit,\n    debounce = 300,\n    placeholder = i18n(Keyset.Search),\n    size = 'm',\n    autoFocus = false,\n    value: externalValue,\n}: SearchProps) => {\n    const onSubmitRef = React.useRef(onSubmit);\n    onSubmitRef.current = onSubmit;\n\n    const handleChange = React.useMemo(\n        () =>\n            lodashDebounce(\n                (...args: Parameters<typeof onSubmit>) => onSubmitRef.current(...args),\n                debounce,\n            ),\n        [debounce],\n    );\n\n    const [value, setValue] = React.useState<string>(initialValue);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const isIPhone = useIsIPhone();\n\n    React.useEffect(() => {\n        if (externalValue !== undefined) {\n            setValue(externalValue);\n        }\n    }, [externalValue]);\n\n    React.useEffect(() => {\n        if (autoFocus && !isIPhone) {\n            setTimeout(() => inputRef?.current?.focus({preventScroll: true}), AUTOFOCUS_TIMEOUT);\n        }\n    }, [autoFocus, inputRef, isIPhone]);\n\n    const rightContent = React.useMemo(() => {\n        const isClose = Boolean(value);\n        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;\n\n        const handleClick = () => {\n            if (value) {\n                handleChange.cancel();\n                setValue('');\n                onSubmit('');\n                inputRef.current?.focus();\n            }\n        };\n\n        return (\n            <button\n                className={b('input-icon', {close: isClose})}\n                onClick={handleClick}\n                aria-label={value ? i18n(Keyset.ClearAction) : undefined}\n                aria-hidden={!value}\n            >\n                <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />\n            </button>\n        );\n    }, [handleChange, onSubmit, value]);\n\n    return (\n        <div className={b({size}, className)}>\n            <TextInput\n                className={b('search-suggest')}\n                value={value}\n                onUpdate={(query) => {\n                    setValue(query);\n                    handleChange(query);\n                }}\n                placeholder={placeholder}\n                size={size === 'm' ? 'xl' : 'l'}\n                controlRef={inputRef}\n                view=\"clear\"\n                controlProps={{\n                    className: b('search-suggest-control'),\n                }}\n                endContent={rightContent}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Magnifier, Xmark} from '@gravity-ui/icons';\nimport {Icon, TextInput} from '@gravity-ui/uikit';\nimport lodashDebounce from 'lodash/debounce';\n\nimport {useIsIPhone} from '../../hooks/useIsIPhone';\nimport {Keyset, i18n} from '../../i18n';\nimport {ClassNameProps} from '../../models/common';\nimport {block} from '../../utils/cn';\n\nimport './Search.scss';\n\nconst b = block('search');\n\nexport type SearchSize = 's' | 'm';\n\ninterface SearchProps extends ClassNameProps {\n    value?: string;\n    initialValue: string;\n    onSubmit: (value: string) => void;\n    debounce?: number;\n    placeholder?: string;\n    size?: SearchSize;\n    autoFocus?: boolean;\n    onClick?: React.MouseEventHandler<HTMLInputElement>;\n    className?: string;\n}\n\nconst SEARCH_ICON_SIZE = 16;\nconst CLOSE_ICON_SIZE = 20;\nconst AUTOFOCUS_TIMEOUT = 0;\n\n/**\n * Search component, placed on blog main page,\n * based on TextInput from uikit\n *\n * @returns {JSX|null}\n */\nexport const Search = ({\n    className,\n    initialValue,\n    onSubmit,\n    debounce = 300,\n    placeholder = i18n(Keyset.Search),\n    size = 'm',\n    autoFocus = false,\n    onClick,\n    value: externalValue,\n}: SearchProps) => {\n    const onSubmitRef = React.useRef(onSubmit);\n    onSubmitRef.current = onSubmit;\n\n    const handleChange = React.useMemo(\n        () =>\n            lodashDebounce(\n                (...args: Parameters<typeof onSubmit>) => onSubmitRef.current(...args),\n                debounce,\n            ),\n        [debounce],\n    );\n\n    const [value, setValue] = React.useState<string>(initialValue);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const isIPhone = useIsIPhone();\n\n    React.useEffect(() => {\n        if (externalValue !== undefined) {\n            setValue(externalValue);\n        }\n    }, [externalValue]);\n\n    React.useEffect(() => {\n        if (autoFocus && !isIPhone) {\n            setTimeout(() => inputRef?.current?.focus({preventScroll: true}), AUTOFOCUS_TIMEOUT);\n        }\n    }, [autoFocus, inputRef, isIPhone]);\n\n    const rightContent = React.useMemo(() => {\n        const isClose = Boolean(value);\n        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;\n\n        const handleClick = () => {\n            if (value) {\n                handleChange.cancel();\n                setValue('');\n                onSubmit('');\n                inputRef.current?.focus();\n            }\n        };\n\n        return (\n            <button\n                className={b('input-icon', {close: isClose})}\n                onClick={handleClick}\n                aria-label={value ? i18n(Keyset.ClearAction) : undefined}\n                aria-hidden={!value}\n            >\n                <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />\n            </button>\n        );\n    }, [handleChange, onSubmit, value]);\n\n    return (\n        <div className={b({size}, className)}>\n            <TextInput\n                className={b('search-suggest')}\n                value={value}\n                onUpdate={(query) => {\n                    setValue(query);\n                    handleChange(query);\n                }}\n                placeholder={placeholder}\n                size={size === 'm' ? 'xl' : 'l'}\n                controlRef={inputRef}\n                view=\"clear\"\n                controlProps={{\n                    className: b('search-suggest-control'),\n                    onClick,\n                }}\n                endContent={rightContent}\n            />\n        </div>\n    );\n};\n"]}

package/build/cjs/models/common.d.ts

@@ -169,6 +169,11 @@ type FilterConfigBase = {
     /** Optional analytics events fired when this control's value changes */
     analyticsEvents?: AnalyticsEventsProp;
 };
+export type SelectFilterCloseData = {
+    selectedValues: string[];
+    changesCount: number;
+};
+export type DynamicAnalyticsEventsProp<T> = AnalyticsEventsProp | ((data: T) => AnalyticsEventsProp);
 export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {
     type?: 'select';
     /** The selectable items for this filter */
@@ -177,14 +182,22 @@ export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple'
     allLabel: string;
     /** Optional QA attribute forwarded to the switcher */
     qa?: string;
+    /** Optional analytics events fired when the select opens */
+    openAnalyticsEvents?: AnalyticsEventsProp;
+    /** Optional analytics events fired when the select closes */
+    closeAnalyticsEvents?: DynamicAnalyticsEventsProp<SelectFilterCloseData>;
 };
 export type SearchFilterConfig = FilterConfigBase & {
     type: 'search';
     /** Placeholder text for the search input */
     placeholder?: string;
+    /** Optional analytics events fired when the search input is clicked */
+    clickAnalyticsEvents?: AnalyticsEventsProp;
 };
 export type SavedOnlyFilterConfig = FilterConfigBase & {
     type: 'savedOnly';
+    /** Optional analytics events fired with the next saved-only state */
+    clickAnalyticsEvents?: DynamicAnalyticsEventsProp<boolean>;
 };
 export type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;
 /**

package/build/cjs/models/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":";;;AAgPA,wDAWC;AA9OD,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,qBAAL,KAAK,QAGhB;AAmFD,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,yBAAT,SAAS,QAgBpB;AA8DD,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,iCAAjB,iBAAiB,QAU5B;AAqDD,SAAgB,sBAAsB,CAAC,OAAsB;IACzD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5B,OAAO,OAA2B,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,OAAyB,CAAC,CAAC;AACvC,CAAC;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,4BAAY,CAAA;AAChB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAED,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACjC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACb,CAAC,EAHW,yBAAyB,yCAAzB,yBAAyB,QAGpC","sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';\nimport {\n    AnalyticsEventsProp,\n    HeaderBlockProps as PageConstructorHeaderBlockProps,\n} from '@gravity-ui/page-constructor';\nimport {SelectOption, SelectProps} from '@gravity-ui/uikit';\nimport {IBrowser, IDevice} from 'ua-parser-js';\n\nimport {Locale} from '../models/locale';\n\nexport enum Theme {\n    Light = 'light',\n    Dark = 'dark',\n}\n\nexport interface ClassNameProps {\n    className?: string;\n}\n\nexport type Author = {\n    id: number | string;\n    avatar: string | null;\n    createdAt: string;\n    updatedAt: string;\n    firstName: string | null;\n    secondName: string | null;\n    description: string | null;\n    fullDescription: string | null;\n    shortDescription: string | null;\n} & {\n    [x: string]: string | null;\n};\n\nexport type Query = Record<string, number | string | null>;\n\n//page models\n\nexport interface Menu {\n    title: string;\n}\n\nexport interface WithDeviceProps {\n    device: IDevice;\n    browser: IBrowser;\n    isRobot: boolean;\n}\n\nexport interface PostsProps {\n    posts: PostData[];\n    count: number;\n    totalCount: number;\n    pinnedPost?: PostData;\n}\n\nexport type Tag = {\n    slug: string;\n    name: string;\n    createdAt?: string;\n    updatedAt?: string;\n    icon?: string;\n    isDeleted?: boolean;\n    locale?: string;\n    blogTagId?: number | string;\n    count?: number;\n};\n\nexport interface PostData {\n    author?: string;\n    authors?: Author[];\n    blogPostId?: number | string;\n    content?: string;\n    date: string;\n    description?: string;\n    hasUserLike: boolean;\n    htmlTitle: string;\n    id: number;\n    image: string;\n    isPublished?: boolean;\n    sharedImage?: string;\n    likes: number;\n    locale: Locale;\n    metaDescription?: string | null;\n    metaTitle?: string | null;\n    readingTime?: number;\n    shareDescription?: string;\n    shareImage?: string;\n    shareTitle?: string;\n    slug: string;\n    keywords?: string[];\n    tags: Tag[];\n    textTitle: string;\n    title: string;\n    url: string;\n    noIndex?: boolean;\n}\n\nexport enum BlockType {\n    Header = 'blog-header-block',\n    YFM = 'blog-yfm-block',\n    Layout = 'blog-layout-block',\n    Media = 'blog-media-block',\n    Banner = 'blog-banner-block',\n    CTA = 'blog-cta-block',\n    ColoredText = 'blog-colored-text-block',\n    Author = 'blog-author-block',\n    Suggest = 'blog-suggest-block',\n    Meta = 'blog-meta-block',\n    Feed = 'blog-feed-block',\n    Form = 'blog-form-block',\n    CompactMedia = 'blog-compact-media-block',\n    Take = 'blog-take-block',\n    SideCardList = 'blog-side-card-list-block',\n}\n\nexport type MetaProps = {\n    metaComponent: JSX.Element;\n    needHelmetWrapper: boolean;\n};\n\nexport type MetaOrganizationType = {\n    url: string;\n    appTitle: string;\n    legalName: string;\n    supportEmail: string;\n};\n\nexport interface PostMetaProps {\n    title: string;\n    date: string;\n    image: string;\n    canonicalUrl: string;\n    content?: string;\n    description?: string;\n    sharing: {\n        shareTitle: string;\n        shareDescription: string;\n        shareImage: string;\n        shareGenImage: string;\n        shareGenTitle: string;\n    };\n    keywords?: string[];\n    noIndex?: boolean;\n    authors?: Author[];\n    tags?: Tag[];\n    organization: MetaOrganizationType;\n}\n\nexport type ToggleLikeCallbackType = ({\n    postId,\n    hasLike,\n}: {\n    postId?: number | string;\n    hasLike?: boolean;\n}) => void;\n\nexport interface HeaderBlockProps extends PageConstructorHeaderBlockProps {\n    backLink?: {\n        url: string;\n        title: React.ReactNode;\n    };\n}\n\nexport type GetPostsRequest = {\n    page: number;\n    perPage: number;\n    savedOnly: boolean;\n    search: string | undefined;\n    [filterParam: string]: string | number | boolean | undefined;\n};\n\nexport type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;\n\nexport type HandleChangeQueryParams = (params: Query) => void;\n\nexport enum DefaultEventNames {\n    ShareButton = 'share-button-click',\n    SaveButton = 'save-button-click',\n    ShowMore = 'show-more-button-click',\n    PaginatorHome = 'paginator-home-button-click',\n    PaginatorNext = 'paginator-next-button-click',\n    PaginatorPage = 'paginator-page-button-click',\n    Tag = 'selector-tag-click',\n    Service = 'selector-service-click',\n    SaveOnly = 'save-only-button-click',\n}\n\nexport type FetchArgs = {\n    page?: number;\n    query: Query;\n};\n\nexport interface QAProps {\n    qa?: string;\n}\n\ntype FilterConfigBase = {\n    /** The key used in queryParams and passed to handleLoadData query */\n    queryParamName: string;\n    /** Optional analytics events fired when this control's value changes */\n    analyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SelectFilterConfig = FilterConfigBase &\n    Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {\n        type?: 'select';\n        /** The selectable items for this filter */\n        options: SelectOption[];\n        /** Label shown when nothing is selected (acts as \"All ...\" placeholder) */\n        allLabel: string;\n        /** Optional QA attribute forwarded to the switcher */\n        qa?: string;\n    };\n\nexport type SearchFilterConfig = FilterConfigBase & {\n    type: 'search';\n    /** Placeholder text for the search input */\n    placeholder?: string;\n};\n\nexport type SavedOnlyFilterConfig = FilterConfigBase & {\n    type: 'savedOnly';\n};\n\nexport type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;\n\n/**\n * Filters can be supplied either as a flat array (all filters in one row)\n * or as an array of rows (each inner array is rendered as a separate row).\n *\n * @example Single row (backward-compatible)\n * filters: [searchFilter, tagsFilter]\n *\n * @example Multiple rows\n * filters: [[searchFilter, savedOnlyFilter], [tagsFilter, serviceFilter]]\n */\nexport type FiltersConfig = FilterConfig[] | FilterConfig[][];\n\nexport function normalizeFiltersToRows(filters: FiltersConfig): FilterConfig[][] {\n    if (filters.length === 0) {\n        return [];\n    }\n\n    // If the first element is itself an array, the input is already multi-row.\n    if (Array.isArray(filters[0])) {\n        return filters as FilterConfig[][];\n    }\n\n    return [filters as FilterConfig[]];\n}\n\nexport enum PostCardSize {\n    SMALL = 's',\n    MEDIUM = 'm',\n}\n\nexport enum PostCardTitleHeadingLevel {\n    H2 = 'h2',\n    H3 = 'h3',\n}\n\nexport interface TransformPostOptions {\n    plugins?: MarkdownItPluginCb[];\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":";;;AAiQA,wDAWC;AA/PD,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,qBAAL,KAAK,QAGhB;AAmFD,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,yBAAT,SAAS,QAgBpB;AA8DD,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,iCAAjB,iBAAiB,QAU5B;AAsED,SAAgB,sBAAsB,CAAC,OAAsB;IACzD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5B,OAAO,OAA2B,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,OAAyB,CAAC,CAAC;AACvC,CAAC;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,4BAAY,CAAA;AAChB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAED,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACjC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACb,CAAC,EAHW,yBAAyB,yCAAzB,yBAAyB,QAGpC","sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';\nimport {\n    AnalyticsEventsProp,\n    HeaderBlockProps as PageConstructorHeaderBlockProps,\n} from '@gravity-ui/page-constructor';\nimport {SelectOption, SelectProps} from '@gravity-ui/uikit';\nimport {IBrowser, IDevice} from 'ua-parser-js';\n\nimport {Locale} from '../models/locale';\n\nexport enum Theme {\n    Light = 'light',\n    Dark = 'dark',\n}\n\nexport interface ClassNameProps {\n    className?: string;\n}\n\nexport type Author = {\n    id: number | string;\n    avatar: string | null;\n    createdAt: string;\n    updatedAt: string;\n    firstName: string | null;\n    secondName: string | null;\n    description: string | null;\n    fullDescription: string | null;\n    shortDescription: string | null;\n} & {\n    [x: string]: string | null;\n};\n\nexport type Query = Record<string, number | string | null>;\n\n//page models\n\nexport interface Menu {\n    title: string;\n}\n\nexport interface WithDeviceProps {\n    device: IDevice;\n    browser: IBrowser;\n    isRobot: boolean;\n}\n\nexport interface PostsProps {\n    posts: PostData[];\n    count: number;\n    totalCount: number;\n    pinnedPost?: PostData;\n}\n\nexport type Tag = {\n    slug: string;\n    name: string;\n    createdAt?: string;\n    updatedAt?: string;\n    icon?: string;\n    isDeleted?: boolean;\n    locale?: string;\n    blogTagId?: number | string;\n    count?: number;\n};\n\nexport interface PostData {\n    author?: string;\n    authors?: Author[];\n    blogPostId?: number | string;\n    content?: string;\n    date: string;\n    description?: string;\n    hasUserLike: boolean;\n    htmlTitle: string;\n    id: number;\n    image: string;\n    isPublished?: boolean;\n    sharedImage?: string;\n    likes: number;\n    locale: Locale;\n    metaDescription?: string | null;\n    metaTitle?: string | null;\n    readingTime?: number;\n    shareDescription?: string;\n    shareImage?: string;\n    shareTitle?: string;\n    slug: string;\n    keywords?: string[];\n    tags: Tag[];\n    textTitle: string;\n    title: string;\n    url: string;\n    noIndex?: boolean;\n}\n\nexport enum BlockType {\n    Header = 'blog-header-block',\n    YFM = 'blog-yfm-block',\n    Layout = 'blog-layout-block',\n    Media = 'blog-media-block',\n    Banner = 'blog-banner-block',\n    CTA = 'blog-cta-block',\n    ColoredText = 'blog-colored-text-block',\n    Author = 'blog-author-block',\n    Suggest = 'blog-suggest-block',\n    Meta = 'blog-meta-block',\n    Feed = 'blog-feed-block',\n    Form = 'blog-form-block',\n    CompactMedia = 'blog-compact-media-block',\n    Take = 'blog-take-block',\n    SideCardList = 'blog-side-card-list-block',\n}\n\nexport type MetaProps = {\n    metaComponent: JSX.Element;\n    needHelmetWrapper: boolean;\n};\n\nexport type MetaOrganizationType = {\n    url: string;\n    appTitle: string;\n    legalName: string;\n    supportEmail: string;\n};\n\nexport interface PostMetaProps {\n    title: string;\n    date: string;\n    image: string;\n    canonicalUrl: string;\n    content?: string;\n    description?: string;\n    sharing: {\n        shareTitle: string;\n        shareDescription: string;\n        shareImage: string;\n        shareGenImage: string;\n        shareGenTitle: string;\n    };\n    keywords?: string[];\n    noIndex?: boolean;\n    authors?: Author[];\n    tags?: Tag[];\n    organization: MetaOrganizationType;\n}\n\nexport type ToggleLikeCallbackType = ({\n    postId,\n    hasLike,\n}: {\n    postId?: number | string;\n    hasLike?: boolean;\n}) => void;\n\nexport interface HeaderBlockProps extends PageConstructorHeaderBlockProps {\n    backLink?: {\n        url: string;\n        title: React.ReactNode;\n    };\n}\n\nexport type GetPostsRequest = {\n    page: number;\n    perPage: number;\n    savedOnly: boolean;\n    search: string | undefined;\n    [filterParam: string]: string | number | boolean | undefined;\n};\n\nexport type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;\n\nexport type HandleChangeQueryParams = (params: Query) => void;\n\nexport enum DefaultEventNames {\n    ShareButton = 'share-button-click',\n    SaveButton = 'save-button-click',\n    ShowMore = 'show-more-button-click',\n    PaginatorHome = 'paginator-home-button-click',\n    PaginatorNext = 'paginator-next-button-click',\n    PaginatorPage = 'paginator-page-button-click',\n    Tag = 'selector-tag-click',\n    Service = 'selector-service-click',\n    SaveOnly = 'save-only-button-click',\n}\n\nexport type FetchArgs = {\n    page?: number;\n    query: Query;\n};\n\nexport interface QAProps {\n    qa?: string;\n}\n\ntype FilterConfigBase = {\n    /** The key used in queryParams and passed to handleLoadData query */\n    queryParamName: string;\n    /** Optional analytics events fired when this control's value changes */\n    analyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SelectFilterCloseData = {\n    selectedValues: string[];\n    changesCount: number;\n};\n\nexport type DynamicAnalyticsEventsProp<T> =\n    | AnalyticsEventsProp\n    | ((data: T) => AnalyticsEventsProp);\n\nexport type SelectFilterConfig = FilterConfigBase &\n    Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {\n        type?: 'select';\n        /** The selectable items for this filter */\n        options: SelectOption[];\n        /** Label shown when nothing is selected (acts as \"All ...\" placeholder) */\n        allLabel: string;\n        /** Optional QA attribute forwarded to the switcher */\n        qa?: string;\n        /** Optional analytics events fired when the select opens */\n        openAnalyticsEvents?: AnalyticsEventsProp;\n        /** Optional analytics events fired when the select closes */\n        closeAnalyticsEvents?: DynamicAnalyticsEventsProp<SelectFilterCloseData>;\n    };\n\nexport type SearchFilterConfig = FilterConfigBase & {\n    type: 'search';\n    /** Placeholder text for the search input */\n    placeholder?: string;\n    /** Optional analytics events fired when the search input is clicked */\n    clickAnalyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SavedOnlyFilterConfig = FilterConfigBase & {\n    type: 'savedOnly';\n    /** Optional analytics events fired with the next saved-only state */\n    clickAnalyticsEvents?: DynamicAnalyticsEventsProp<boolean>;\n};\n\nexport type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;\n\n/**\n * Filters can be supplied either as a flat array (all filters in one row)\n * or as an array of rows (each inner array is rendered as a separate row).\n *\n * @example Single row (backward-compatible)\n * filters: [searchFilter, tagsFilter]\n *\n * @example Multiple rows\n * filters: [[searchFilter, savedOnlyFilter], [tagsFilter, serviceFilter]]\n */\nexport type FiltersConfig = FilterConfig[] | FilterConfig[][];\n\nexport function normalizeFiltersToRows(filters: FiltersConfig): FilterConfig[][] {\n    if (filters.length === 0) {\n        return [];\n    }\n\n    // If the first element is itself an array, the input is already multi-row.\n    if (Array.isArray(filters[0])) {\n        return filters as FilterConfig[][];\n    }\n\n    return [filters as FilterConfig[]];\n}\n\nexport enum PostCardSize {\n    SMALL = 's',\n    MEDIUM = 'm',\n}\n\nexport enum PostCardTitleHeadingLevel {\n    H2 = 'h2',\n    H3 = 'h3',\n}\n\nexport interface TransformPostOptions {\n    plugins?: MarkdownItPluginCb[];\n}\n"]}

package/build/esm/components/FeedHeader/components/FilterControl/FilterControl.js

@@ -8,6 +8,7 @@ import { SearchFilter } from "../SearchFilter/SearchFilter.js";
 import { SelectFilter } from "../SelectFilter/SelectFilter.js";
 import './FilterControl.css';
 const b = block('filter-control');
+const resolveAnalyticsEvents = (analyticsEvents, data) => typeof analyticsEvents === 'function' ? analyticsEvents(data) : analyticsEvents;
 export const FilterControl = ({ filter, initialValue, onChange }) => {
     const handleAnalytics = useAnalytics();
     const { hasLikes } = React.useContext(LikesContext);
@@ -18,17 +19,27 @@ export const FilterControl = ({ filter, initialValue, onChange }) => {
         onChange(query);
     }, [filter.analyticsEvents, handleAnalytics, onChange]);
     if (filter.type === 'search') {
-        const { queryParamName, placeholder } = filter;
-        return (_jsx("div", { className: b(), children: _jsx(SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
+        const { queryParamName, placeholder, clickAnalyticsEvents } = filter;
+        return (_jsx("div", { className: b(), children: _jsx(SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onClick: clickAnalyticsEvents
+                    ? () => handleAnalytics(clickAnalyticsEvents)
+                    : undefined }) }));
     }
     if (filter.type === 'savedOnly') {
-        const { queryParamName } = filter;
+        const { queryParamName, clickAnalyticsEvents } = filter;
         if (!hasLikes) {
             return null;
         }
-        return (_jsx("div", { className: b({ 'width-auto': true }), children: _jsx(SavedOnlyFilter, { initialValue: initialValue === 'true', onChange: (value) => handleChange({ [queryParamName]: value ? 'true' : '', search: '' }) }) }));
+        const handleSavedOnlyChange = (value) => {
+            if (clickAnalyticsEvents) {
+                handleAnalytics(resolveAnalyticsEvents(clickAnalyticsEvents, value));
+            }
+            handleChange({ [queryParamName]: value ? 'true' : '', search: '' });
+        };
+        return (_jsx("div", { className: b({ 'width-auto': true }), children: _jsx(SavedOnlyFilter, { initialValue: initialValue === 'true', onChange: handleSavedOnlyChange }) }));
     }
-    const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa } = filter;
-    return (_jsx("div", { className: b(), children: _jsx(SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
+    const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa, openAnalyticsEvents, closeAnalyticsEvents, } = filter;
+    return (_jsx("div", { className: b(), children: _jsx(SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onOpen: openAnalyticsEvents ? () => handleAnalytics(openAnalyticsEvents) : undefined, onClose: closeAnalyticsEvents
+                ? (data) => handleAnalytics(resolveAnalyticsEvents(closeAnalyticsEvents, data))
+                : undefined }) }));
 };
 //# sourceMappingURL=FilterControl.js.map

package/build/esm/components/FeedHeader/components/FilterControl/FilterControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAE1D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAQ/D,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,eAAe,EAAC,8CAA2C;AACnE,OAAO,EAAC,YAAY,EAAC,wCAAqC;AAC1D,OAAO,EAAC,YAAY,EAAC,wCAAqC;AAE1D,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAQlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,YAAY,EAAE,CAAC;IACvC,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAY,EAAE,EAAE;QACb,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YACzB,eAAe,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,CAAC,CACtD,CAAC;IAEF,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,EAAC,cAAc,EAAE,WAAW,EAAC,GAAG,MAA4B,CAAC;QACnE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,EAAE,YACf,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAkC,EAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAU,CAAC,GACvE,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;QAC9B,MAAM,EAAC,cAAc,EAAC,GAAG,MAA+B,CAAC;QAEzD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,YAAY,EAAE,IAAI,EAAC,CAAC,YACnC,KAAC,eAAe,IACZ,YAAY,EAAE,YAAY,KAAK,MAAM,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAChB,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAU,CAAC,GAEhF,GACA,CACT,CAAC;IACN,CAAC;IAED,MAAM,EAAC,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAC,GACtF,MAA4B,CAAC;IAEjC,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,EAAE,YACf,KAAC,YAAY,IACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAiC,EAC9C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAU,CAAC,GACvE,GACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '@gravity-ui/page-constructor';\n\nimport {LikesContext} from '../../../../contexts/LikesContext';\nimport {\n    FilterConfig,\n    Query,\n    SavedOnlyFilterConfig,\n    SearchFilterConfig,\n    SelectFilterConfig,\n} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\nimport {SavedOnlyFilter} from '../SavedOnlyFilter/SavedOnlyFilter';\nimport {SearchFilter} from '../SearchFilter/SearchFilter';\nimport {SelectFilter} from '../SelectFilter/SelectFilter';\n\nimport './FilterControl.scss';\n\nconst b = block('filter-control');\n\nexport type FilterControlProps = {\n    filter: FilterConfig;\n    initialValue: string | number | null | undefined;\n    onChange: (query: Query) => void;\n};\n\nexport const FilterControl = ({filter, initialValue, onChange}: FilterControlProps) => {\n    const handleAnalytics = useAnalytics();\n    const {hasLikes} = React.useContext(LikesContext);\n\n    const handleChange = React.useCallback(\n        (query: Query) => {\n            if (filter.analyticsEvents) {\n                handleAnalytics(filter.analyticsEvents);\n            }\n            onChange(query);\n        },\n        [filter.analyticsEvents, handleAnalytics, onChange],\n    );\n\n    if (filter.type === 'search') {\n        const {queryParamName, placeholder} = filter as SearchFilterConfig;\n        return (\n            <div className={b()}>\n                <SearchFilter\n                    placeholder={placeholder}\n                    initialValue={initialValue as string | undefined}\n                    onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n                />\n            </div>\n        );\n    }\n\n    if (filter.type === 'savedOnly') {\n        const {queryParamName} = filter as SavedOnlyFilterConfig;\n\n        if (!hasLikes) {\n            return null;\n        }\n\n        return (\n            <div className={b({'width-auto': true})}>\n                <SavedOnlyFilter\n                    initialValue={initialValue === 'true'}\n                    onChange={(value) =>\n                        handleChange({[queryParamName]: value ? 'true' : '', search: ''} as Query)\n                    }\n                />\n            </div>\n        );\n    }\n\n    const {queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa} =\n        filter as SelectFilterConfig;\n\n    return (\n        <div className={b()}>\n            <SelectFilter\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear}\n                placeholder={placeholder as string | undefined}\n                options={options}\n                allLabel={allLabel}\n                qa={qa}\n                initialValue={initialValue}\n                onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '@gravity-ui/page-constructor';\n\nimport {LikesContext} from '../../../../contexts/LikesContext';\nimport {\n    DynamicAnalyticsEventsProp,\n    FilterConfig,\n    Query,\n    SavedOnlyFilterConfig,\n    SearchFilterConfig,\n    SelectFilterConfig,\n} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\nimport {SavedOnlyFilter} from '../SavedOnlyFilter/SavedOnlyFilter';\nimport {SearchFilter} from '../SearchFilter/SearchFilter';\nimport {SelectFilter} from '../SelectFilter/SelectFilter';\n\nimport './FilterControl.scss';\n\nconst b = block('filter-control');\n\nconst resolveAnalyticsEvents = <T,>(analyticsEvents: DynamicAnalyticsEventsProp<T>, data: T) =>\n    typeof analyticsEvents === 'function' ? analyticsEvents(data) : analyticsEvents;\n\nexport type FilterControlProps = {\n    filter: FilterConfig;\n    initialValue: string | number | null | undefined;\n    onChange: (query: Query) => void;\n};\n\nexport const FilterControl = ({filter, initialValue, onChange}: FilterControlProps) => {\n    const handleAnalytics = useAnalytics();\n    const {hasLikes} = React.useContext(LikesContext);\n\n    const handleChange = React.useCallback(\n        (query: Query) => {\n            if (filter.analyticsEvents) {\n                handleAnalytics(filter.analyticsEvents);\n            }\n            onChange(query);\n        },\n        [filter.analyticsEvents, handleAnalytics, onChange],\n    );\n\n    if (filter.type === 'search') {\n        const {queryParamName, placeholder, clickAnalyticsEvents} = filter as SearchFilterConfig;\n\n        return (\n            <div className={b()}>\n                <SearchFilter\n                    placeholder={placeholder}\n                    initialValue={initialValue as string | undefined}\n                    onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n                    onClick={\n                        clickAnalyticsEvents\n                            ? () => handleAnalytics(clickAnalyticsEvents)\n                            : undefined\n                    }\n                />\n            </div>\n        );\n    }\n\n    if (filter.type === 'savedOnly') {\n        const {queryParamName, clickAnalyticsEvents} = filter as SavedOnlyFilterConfig;\n\n        if (!hasLikes) {\n            return null;\n        }\n\n        const handleSavedOnlyChange = (value: boolean) => {\n            if (clickAnalyticsEvents) {\n                handleAnalytics(resolveAnalyticsEvents(clickAnalyticsEvents, value));\n            }\n            handleChange({[queryParamName]: value ? 'true' : '', search: ''} as Query);\n        };\n\n        return (\n            <div className={b({'width-auto': true})}>\n                <SavedOnlyFilter\n                    initialValue={initialValue === 'true'}\n                    onChange={handleSavedOnlyChange}\n                />\n            </div>\n        );\n    }\n\n    const {\n        queryParamName,\n        multiple,\n        filterable,\n        hasClear,\n        placeholder,\n        options,\n        allLabel,\n        qa,\n        openAnalyticsEvents,\n        closeAnalyticsEvents,\n    } = filter as SelectFilterConfig;\n\n    return (\n        <div className={b()}>\n            <SelectFilter\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear}\n                placeholder={placeholder as string | undefined}\n                options={options}\n                allLabel={allLabel}\n                qa={qa}\n                initialValue={initialValue}\n                onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n                onOpen={\n                    openAnalyticsEvents ? () => handleAnalytics(openAnalyticsEvents) : undefined\n                }\n                onClose={\n                    closeAnalyticsEvents\n                        ? (data) =>\n                              handleAnalytics(resolveAnalyticsEvents(closeAnalyticsEvents, data))\n                        : undefined\n                }\n            />\n        </div>\n    );\n};\n"]}

package/build/esm/components/FeedHeader/components/SearchFilter/SearchFilter.d.ts

@@ -3,6 +3,7 @@ export type SearchFilterProps = {
     placeholder?: string;
     initialValue: string | undefined;
     onChange: (value: string) => void;
+    onClick?: () => void;
     className?: string;
 };
-export declare const SearchFilter: ({ placeholder, initialValue, onChange, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchFilter: ({ placeholder, initialValue, onChange, onClick, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;

package/build/esm/components/FeedHeader/components/SearchFilter/SearchFilter.js

@@ -4,7 +4,7 @@ import { block } from "../../../../utils/cn.js";
 import { Search } from "../../../Search/Search.js";
 import './SearchFilter.css';
 const b = block('search-filter');
-export const SearchFilter = ({ placeholder, initialValue, onChange, className, }) => {
-    return (_jsx("div", { className: className, children: _jsx(Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : i18n(Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange }) }));
+export const SearchFilter = ({ placeholder, initialValue, onChange, onClick, className, }) => {
+    return (_jsx("div", { className: className, children: _jsx(Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : i18n(Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange, onClick: onClick }) }));
 };
 //# sourceMappingURL=SearchFilter.js.map

package/build/esm/components/FeedHeader/components/SearchFilter/SearchFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,kCAAyB;AAC9C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,MAAM,EAAC,kCAA+B;AAE9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AASjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,SAAS,GACO,EAAE,EAAE;IACpB,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAC/C,YAAY,EAAE,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClF,QAAQ,EAAE,QAAQ,GACpB,GACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {Keyset, i18n} from '../../../../i18n';\nimport {block} from '../../../../utils/cn';\nimport {Search} from '../../../Search/Search';\n\nimport './SearchFilter.scss';\n\nconst b = block('search-filter');\n\nexport type SearchFilterProps = {\n    placeholder?: string;\n    initialValue: string | undefined;\n    onChange: (value: string) => void;\n    className?: string;\n};\n\nexport const SearchFilter = ({\n    placeholder,\n    initialValue,\n    onChange,\n    className,\n}: SearchFilterProps) => {\n    return (\n        <div className={className}>\n            <Search\n                className={b('search')}\n                placeholder={placeholder ?? i18n(Keyset.Search)}\n                initialValue={initialValue && typeof initialValue === 'string' ? initialValue : ''}\n                onSubmit={onChange}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,kCAAyB;AAC9C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,MAAM,EAAC,kCAA+B;AAE9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAUjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACO,EAAE,EAAE;IACpB,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAC/C,YAAY,EAAE,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAClB,GACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {Keyset, i18n} from '../../../../i18n';\nimport {block} from '../../../../utils/cn';\nimport {Search} from '../../../Search/Search';\n\nimport './SearchFilter.scss';\n\nconst b = block('search-filter');\n\nexport type SearchFilterProps = {\n    placeholder?: string;\n    initialValue: string | undefined;\n    onChange: (value: string) => void;\n    onClick?: () => void;\n    className?: string;\n};\n\nexport const SearchFilter = ({\n    placeholder,\n    initialValue,\n    onChange,\n    onClick,\n    className,\n}: SearchFilterProps) => {\n    return (\n        <div className={className}>\n            <Search\n                className={b('search')}\n                placeholder={placeholder ?? i18n(Keyset.Search)}\n                initialValue={initialValue && typeof initialValue === 'string' ? initialValue : ''}\n                onSubmit={onChange}\n                onClick={onClick}\n            />\n        </div>\n    );\n};\n"]}

package/build/esm/components/FeedHeader/components/SelectFilter/SelectFilter.d.ts

@@ -1,4 +1,5 @@
 import { SelectOption } from '@gravity-ui/uikit';
+import { SelectFilterCloseData } from "../../../../models/common.js";
 import './SelectFilter.css';
 export type SelectFilterProps = {
     multiple?: boolean;
@@ -10,6 +11,8 @@ export type SelectFilterProps = {
     qa?: string;
     initialValue: string | number | null | undefined;
     onChange: (value: string) => void;
+    onOpen?: () => void;
+    onClose?: (data: SelectFilterCloseData) => void;
     className?: string;
 };
-export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;

package/build/esm/components/FeedHeader/components/SelectFilter/SelectFilter.js

@@ -7,28 +7,57 @@ import { renderFilter, renderOption, renderSwitcher } from "./customRenders.js";
 import './SelectFilter.css';
 const b = block('feed-filter');
 const VIRTUALIZATION_THRESHOLD = 1000;
-export const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }) => {
+const getSelectedValuesChangesCount = (initial, current) => {
+    const initialValues = new Set(initial);
+    const currentValues = new Set(current);
+    const removedValuesCount = initial.filter((value) => !currentValues.has(value)).length;
+    const addedValuesCount = current.filter((value) => !initialValues.has(value)).length;
+    return removedValuesCount + addedValuesCount;
+};
+export const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }) => {
     const isMobile = React.useContext(MobileContext);
     let defaultValue;
     if (multiple) {
         defaultValue = initialValue ? initialValue.split(',') : [];
     }
     else {
-        defaultValue = [initialValue];
+        defaultValue =
+            initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];
     }
+    const selectedValuesRef = React.useRef(defaultValue);
+    const selectedValuesOnOpenRef = React.useRef(defaultValue);
+    const isOpenRef = React.useRef(false);
     const optionsWithEmpty = multiple
         ? options
         : [{ value: 'empty', content: allLabel }, ...options];
     const handleChange = (selectedValues) => {
         if (multiple) {
+            selectedValuesRef.current = selectedValues;
             onChange(selectedValues.join(','));
         }
         else {
             const isEmpty = selectedValues.some((v) => v === 'empty');
+            selectedValuesRef.current = isEmpty ? [] : selectedValues;
             onChange(isEmpty ? '' : selectedValues[0]);
         }
     };
-    return (_jsx("div", { className: className, children: _jsx(Select, { className: b('select'), size: "xl", multiple: multiple, filterable: filterable, hasClear: hasClear !== null && hasClear !== void 0 ? hasClear : multiple, disablePortal: true, options: optionsWithEmpty, defaultValue: defaultValue, popupClassName: b('popup', { isMobile }), onUpdate: handleChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : allLabel, renderControl: renderSwitcher({
+    const handleOpenChange = (isOpen) => {
+        if (isOpen) {
+            selectedValuesOnOpenRef.current = [...selectedValuesRef.current];
+            isOpenRef.current = true;
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            return;
+        }
+        if (isOpenRef.current) {
+            const selectedValues = [...selectedValuesRef.current];
+            onClose === null || onClose === void 0 ? void 0 : onClose({
+                selectedValues,
+                changesCount: getSelectedValuesChangesCount(selectedValuesOnOpenRef.current, selectedValues),
+            });
+        }
+        isOpenRef.current = false;
+    };
+    return (_jsx("div", { className: className, children: _jsx(Select, { className: b('select'), size: "xl", multiple: multiple, filterable: filterable, hasClear: hasClear !== null && hasClear !== void 0 ? hasClear : multiple, disablePortal: true, options: optionsWithEmpty, defaultValue: defaultValue, popupClassName: b('popup', { isMobile }), onUpdate: handleChange, onOpenChange: handleOpenChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : allLabel, renderControl: renderSwitcher({
                 initial: defaultValue,
                 list: optionsWithEmpty,
                 defaultLabel: allLabel,

package/build/esm/components/FeedHeader/components/SelectFilter/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,MAAM,EAAe,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAE3C,OAAO,EAAC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAC,2BAAwB;AAE3E,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,wBAAwB,GAAG,IAAI,CAAC;AAetC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,EAAE,EACF,YAAY,EACZ,QAAQ,EACR,SAAS,GACO,EAAE,EAAE;IACpB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,IAAI,YAAsB,CAAC;IAC3B,IAAI,QAAQ,EAAE,CAAC;QACX,YAAY,GAAG,YAAY,CAAC,CAAC,CAAE,YAAuB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3E,CAAC;SAAM,CAAC;QACJ,YAAY,GAAG,CAAC,YAAY,CAAa,CAAC;IAC9C,CAAC;IAED,MAAM,gBAAgB,GAAmB,QAAQ;QAC7C,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,GAAG,OAAO,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CAAC,cAAwB,EAAE,EAAE;QAC9C,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;YAC1D,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ,EAC9B,aAAa,QACb,OAAO,EAAE,gBAAgB,EACzB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,CAAC,EACtC,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,EACpC,aAAa,EAAE,cAAc,CAAC;gBAC1B,OAAO,EAAE,YAAY;gBACrB,IAAI,EAAE,gBAAgB;gBACtB,YAAY,EAAE,QAAQ;gBACtB,EAAE;aACL,CAAC,EACF,uBAAuB,EAAE,wBAAwB,EACjD,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,EAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GACrF,GACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Select, SelectOption} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../../../contexts/MobileContext';\nimport {block} from '../../../../utils/cn';\n\nimport {renderFilter, renderOption, renderSwitcher} from './customRenders';\n\nimport './SelectFilter.scss';\n\nconst b = block('feed-filter');\n\nconst VIRTUALIZATION_THRESHOLD = 1000;\n\nexport type SelectFilterProps = {\n    multiple?: boolean;\n    filterable?: boolean;\n    hasClear?: boolean;\n    placeholder?: string;\n    options: SelectOption[];\n    allLabel: string;\n    qa?: string;\n    initialValue: string | number | null | undefined;\n    onChange: (value: string) => void;\n    className?: string;\n};\n\nexport const SelectFilter = ({\n    multiple,\n    filterable,\n    hasClear,\n    placeholder,\n    options,\n    allLabel,\n    qa,\n    initialValue,\n    onChange,\n    className,\n}: SelectFilterProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    let defaultValue: string[];\n    if (multiple) {\n        defaultValue = initialValue ? (initialValue as string).split(',') : [];\n    } else {\n        defaultValue = [initialValue] as string[];\n    }\n\n    const optionsWithEmpty: SelectOption[] = multiple\n        ? options\n        : [{value: 'empty', content: allLabel}, ...options];\n\n    const handleChange = (selectedValues: string[]) => {\n        if (multiple) {\n            onChange(selectedValues.join(','));\n        } else {\n            const isEmpty = selectedValues.some((v) => v === 'empty');\n            onChange(isEmpty ? '' : selectedValues[0]);\n        }\n    };\n\n    return (\n        <div className={className}>\n            <Select\n                className={b('select')}\n                size=\"xl\"\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear ?? multiple}\n                disablePortal\n                options={optionsWithEmpty}\n                defaultValue={defaultValue}\n                popupClassName={b('popup', {isMobile})}\n                onUpdate={handleChange}\n                placeholder={placeholder ?? allLabel}\n                renderControl={renderSwitcher({\n                    initial: defaultValue,\n                    list: optionsWithEmpty,\n                    defaultLabel: allLabel,\n                    qa,\n                })}\n                virtualizationThreshold={VIRTUALIZATION_THRESHOLD}\n                renderOption={renderOption}\n                renderFilter={filterable ? renderFilter({className: b('popup-filter')}) : undefined}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Select, SelectOption} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../../../contexts/MobileContext';\nimport {SelectFilterCloseData} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\n\nimport {renderFilter, renderOption, renderSwitcher} from './customRenders';\n\nimport './SelectFilter.scss';\n\nconst b = block('feed-filter');\n\nconst VIRTUALIZATION_THRESHOLD = 1000;\n\nexport type SelectFilterProps = {\n    multiple?: boolean;\n    filterable?: boolean;\n    hasClear?: boolean;\n    placeholder?: string;\n    options: SelectOption[];\n    allLabel: string;\n    qa?: string;\n    initialValue: string | number | null | undefined;\n    onChange: (value: string) => void;\n    onOpen?: () => void;\n    onClose?: (data: SelectFilterCloseData) => void;\n    className?: string;\n};\n\nconst getSelectedValuesChangesCount = (initial: string[], current: string[]) => {\n    const initialValues = new Set(initial);\n    const currentValues = new Set(current);\n\n    const removedValuesCount = initial.filter((value) => !currentValues.has(value)).length;\n    const addedValuesCount = current.filter((value) => !initialValues.has(value)).length;\n\n    return removedValuesCount + addedValuesCount;\n};\n\nexport const SelectFilter = ({\n    multiple,\n    filterable,\n    hasClear,\n    placeholder,\n    options,\n    allLabel,\n    qa,\n    initialValue,\n    onChange,\n    onOpen,\n    onClose,\n    className,\n}: SelectFilterProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    let defaultValue: string[];\n    if (multiple) {\n        defaultValue = initialValue ? (initialValue as string).split(',') : [];\n    } else {\n        defaultValue =\n            initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];\n    }\n\n    const selectedValuesRef = React.useRef(defaultValue);\n    const selectedValuesOnOpenRef = React.useRef(defaultValue);\n    const isOpenRef = React.useRef(false);\n\n    const optionsWithEmpty: SelectOption[] = multiple\n        ? options\n        : [{value: 'empty', content: allLabel}, ...options];\n\n    const handleChange = (selectedValues: string[]) => {\n        if (multiple) {\n            selectedValuesRef.current = selectedValues;\n            onChange(selectedValues.join(','));\n        } else {\n            const isEmpty = selectedValues.some((v) => v === 'empty');\n            selectedValuesRef.current = isEmpty ? [] : selectedValues;\n            onChange(isEmpty ? '' : selectedValues[0]);\n        }\n    };\n\n    const handleOpenChange = (isOpen: boolean) => {\n        if (isOpen) {\n            selectedValuesOnOpenRef.current = [...selectedValuesRef.current];\n            isOpenRef.current = true;\n            onOpen?.();\n            return;\n        }\n\n        if (isOpenRef.current) {\n            const selectedValues = [...selectedValuesRef.current];\n            onClose?.({\n                selectedValues,\n                changesCount: getSelectedValuesChangesCount(\n                    selectedValuesOnOpenRef.current,\n                    selectedValues,\n                ),\n            });\n        }\n\n        isOpenRef.current = false;\n    };\n\n    return (\n        <div className={className}>\n            <Select\n                className={b('select')}\n                size=\"xl\"\n                multiple={multiple}\n                filterable={filterable}\n                hasClear={hasClear ?? multiple}\n                disablePortal\n                options={optionsWithEmpty}\n                defaultValue={defaultValue}\n                popupClassName={b('popup', {isMobile})}\n                onUpdate={handleChange}\n                onOpenChange={handleOpenChange}\n                placeholder={placeholder ?? allLabel}\n                renderControl={renderSwitcher({\n                    initial: defaultValue,\n                    list: optionsWithEmpty,\n                    defaultLabel: allLabel,\n                    qa,\n                })}\n                virtualizationThreshold={VIRTUALIZATION_THRESHOLD}\n                renderOption={renderOption}\n                renderFilter={filterable ? renderFilter({className: b('popup-filter')}) : undefined}\n            />\n        </div>\n    );\n};\n"]}

package/build/esm/components/Search/Search.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ClassNameProps } from "../../models/common.js";
 import './Search.css';
 export type SearchSize = 's' | 'm';
@@ -9,6 +10,7 @@ interface SearchProps extends ClassNameProps {
     placeholder?: string;
     size?: SearchSize;
     autoFocus?: boolean;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
     className?: string;
 }
 /**
@@ -17,5 +19,5 @@ interface SearchProps extends ClassNameProps {
  *
  * @returns {JSX|null}
  */
-export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, onClick, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/esm/components/Search/Search.js

@@ -17,7 +17,7 @@ const AUTOFOCUS_TIMEOUT = 0;
  *
  * @returns {JSX|null}
  */
-export const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = i18n(Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
+export const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = i18n(Keyset.Search), size = 'm', autoFocus = false, onClick, value: externalValue, }) => {
     const onSubmitRef = React.useRef(onSubmit);
     onSubmitRef.current = onSubmit;
     const handleChange = React.useMemo(() => lodashDebounce((...args) => onSubmitRef.current(...args), debounce), [debounce]);
@@ -53,6 +53,7 @@ export const Search = ({ className, initialValue, onSubmit, debounce = 300, plac
                 handleChange(query);
             }, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
                 className: b('search-suggest-control'),
+                onClick,
             }, endContent: rightContent }) }));
 };
 //# sourceMappingURL=Search.js.map

package/build/esm/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Magnifier, Xmark} from '@gravity-ui/icons';\nimport {Icon, TextInput} from '@gravity-ui/uikit';\nimport lodashDebounce from 'lodash/debounce';\n\nimport {useIsIPhone} from '../../hooks/useIsIPhone';\nimport {Keyset, i18n} from '../../i18n';\nimport {ClassNameProps} from '../../models/common';\nimport {block} from '../../utils/cn';\n\nimport './Search.scss';\n\nconst b = block('search');\n\nexport type SearchSize = 's' | 'm';\n\ninterface SearchProps extends ClassNameProps {\n    value?: string;\n    initialValue: string;\n    onSubmit: (value: string) => void;\n    debounce?: number;\n    placeholder?: string;\n    size?: SearchSize;\n    autoFocus?: boolean;\n    className?: string;\n}\n\nconst SEARCH_ICON_SIZE = 16;\nconst CLOSE_ICON_SIZE = 20;\nconst AUTOFOCUS_TIMEOUT = 0;\n\n/**\n * Search component, placed on blog main page,\n * based on TextInput from uikit\n *\n * @returns {JSX|null}\n */\nexport const Search = ({\n    className,\n    initialValue,\n    onSubmit,\n    debounce = 300,\n    placeholder = i18n(Keyset.Search),\n    size = 'm',\n    autoFocus = false,\n    value: externalValue,\n}: SearchProps) => {\n    const onSubmitRef = React.useRef(onSubmit);\n    onSubmitRef.current = onSubmit;\n\n    const handleChange = React.useMemo(\n        () =>\n            lodashDebounce(\n                (...args: Parameters<typeof onSubmit>) => onSubmitRef.current(...args),\n                debounce,\n            ),\n        [debounce],\n    );\n\n    const [value, setValue] = React.useState<string>(initialValue);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const isIPhone = useIsIPhone();\n\n    React.useEffect(() => {\n        if (externalValue !== undefined) {\n            setValue(externalValue);\n        }\n    }, [externalValue]);\n\n    React.useEffect(() => {\n        if (autoFocus && !isIPhone) {\n            setTimeout(() => inputRef?.current?.focus({preventScroll: true}), AUTOFOCUS_TIMEOUT);\n        }\n    }, [autoFocus, inputRef, isIPhone]);\n\n    const rightContent = React.useMemo(() => {\n        const isClose = Boolean(value);\n        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;\n\n        const handleClick = () => {\n            if (value) {\n                handleChange.cancel();\n                setValue('');\n                onSubmit('');\n                inputRef.current?.focus();\n            }\n        };\n\n        return (\n            <button\n                className={b('input-icon', {close: isClose})}\n                onClick={handleClick}\n                aria-label={value ? i18n(Keyset.ClearAction) : undefined}\n                aria-hidden={!value}\n            >\n                <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />\n            </button>\n        );\n    }, [handleChange, onSubmit, value]);\n\n    return (\n        <div className={b({size}, className)}>\n            <TextInput\n                className={b('search-suggest')}\n                value={value}\n                onUpdate={(query) => {\n                    setValue(query);\n                    handleChange(query);\n                }}\n                placeholder={placeholder}\n                size={size === 'm' ? 'xl' : 'l'}\n                controlRef={inputRef}\n                view=\"clear\"\n                controlProps={{\n                    className: b('search-suggest-control'),\n                }}\n                endContent={rightContent}\n            />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Magnifier, Xmark} from '@gravity-ui/icons';\nimport {Icon, TextInput} from '@gravity-ui/uikit';\nimport lodashDebounce from 'lodash/debounce';\n\nimport {useIsIPhone} from '../../hooks/useIsIPhone';\nimport {Keyset, i18n} from '../../i18n';\nimport {ClassNameProps} from '../../models/common';\nimport {block} from '../../utils/cn';\n\nimport './Search.scss';\n\nconst b = block('search');\n\nexport type SearchSize = 's' | 'm';\n\ninterface SearchProps extends ClassNameProps {\n    value?: string;\n    initialValue: string;\n    onSubmit: (value: string) => void;\n    debounce?: number;\n    placeholder?: string;\n    size?: SearchSize;\n    autoFocus?: boolean;\n    onClick?: React.MouseEventHandler<HTMLInputElement>;\n    className?: string;\n}\n\nconst SEARCH_ICON_SIZE = 16;\nconst CLOSE_ICON_SIZE = 20;\nconst AUTOFOCUS_TIMEOUT = 0;\n\n/**\n * Search component, placed on blog main page,\n * based on TextInput from uikit\n *\n * @returns {JSX|null}\n */\nexport const Search = ({\n    className,\n    initialValue,\n    onSubmit,\n    debounce = 300,\n    placeholder = i18n(Keyset.Search),\n    size = 'm',\n    autoFocus = false,\n    onClick,\n    value: externalValue,\n}: SearchProps) => {\n    const onSubmitRef = React.useRef(onSubmit);\n    onSubmitRef.current = onSubmit;\n\n    const handleChange = React.useMemo(\n        () =>\n            lodashDebounce(\n                (...args: Parameters<typeof onSubmit>) => onSubmitRef.current(...args),\n                debounce,\n            ),\n        [debounce],\n    );\n\n    const [value, setValue] = React.useState<string>(initialValue);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const isIPhone = useIsIPhone();\n\n    React.useEffect(() => {\n        if (externalValue !== undefined) {\n            setValue(externalValue);\n        }\n    }, [externalValue]);\n\n    React.useEffect(() => {\n        if (autoFocus && !isIPhone) {\n            setTimeout(() => inputRef?.current?.focus({preventScroll: true}), AUTOFOCUS_TIMEOUT);\n        }\n    }, [autoFocus, inputRef, isIPhone]);\n\n    const rightContent = React.useMemo(() => {\n        const isClose = Boolean(value);\n        const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;\n\n        const handleClick = () => {\n            if (value) {\n                handleChange.cancel();\n                setValue('');\n                onSubmit('');\n                inputRef.current?.focus();\n            }\n        };\n\n        return (\n            <button\n                className={b('input-icon', {close: isClose})}\n                onClick={handleClick}\n                aria-label={value ? i18n(Keyset.ClearAction) : undefined}\n                aria-hidden={!value}\n            >\n                <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />\n            </button>\n        );\n    }, [handleChange, onSubmit, value]);\n\n    return (\n        <div className={b({size}, className)}>\n            <TextInput\n                className={b('search-suggest')}\n                value={value}\n                onUpdate={(query) => {\n                    setValue(query);\n                    handleChange(query);\n                }}\n                placeholder={placeholder}\n                size={size === 'm' ? 'xl' : 'l'}\n                controlRef={inputRef}\n                view=\"clear\"\n                controlProps={{\n                    className: b('search-suggest-control'),\n                    onClick,\n                }}\n                endContent={rightContent}\n            />\n        </div>\n    );\n};\n"]}

package/build/esm/models/common.d.ts

@@ -169,6 +169,11 @@ type FilterConfigBase = {
     /** Optional analytics events fired when this control's value changes */
     analyticsEvents?: AnalyticsEventsProp;
 };
+export type SelectFilterCloseData = {
+    selectedValues: string[];
+    changesCount: number;
+};
+export type DynamicAnalyticsEventsProp<T> = AnalyticsEventsProp | ((data: T) => AnalyticsEventsProp);
 export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {
     type?: 'select';
     /** The selectable items for this filter */
@@ -177,14 +182,22 @@ export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple'
     allLabel: string;
     /** Optional QA attribute forwarded to the switcher */
     qa?: string;
+    /** Optional analytics events fired when the select opens */
+    openAnalyticsEvents?: AnalyticsEventsProp;
+    /** Optional analytics events fired when the select closes */
+    closeAnalyticsEvents?: DynamicAnalyticsEventsProp<SelectFilterCloseData>;
 };
 export type SearchFilterConfig = FilterConfigBase & {
     type: 'search';
     /** Placeholder text for the search input */
     placeholder?: string;
+    /** Optional analytics events fired when the search input is clicked */
+    clickAnalyticsEvents?: AnalyticsEventsProp;
 };
 export type SavedOnlyFilterConfig = FilterConfigBase & {
     type: 'savedOnly';
+    /** Optional analytics events fired with the next saved-only state */
+    clickAnalyticsEvents?: DynamicAnalyticsEventsProp<boolean>;
 };
 export type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;
 /**

package/build/esm/models/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAmFD,MAAM,CAAN,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,KAAT,SAAS,QAgBpB;AA8DD,MAAM,CAAN,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;AAqDD,MAAM,UAAU,sBAAsB,CAAC,OAAsB;IACzD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5B,OAAO,OAA2B,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,OAAyB,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,4BAAY,CAAA;AAChB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACjC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACb,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,QAGpC","sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';\nimport {\n    AnalyticsEventsProp,\n    HeaderBlockProps as PageConstructorHeaderBlockProps,\n} from '@gravity-ui/page-constructor';\nimport {SelectOption, SelectProps} from '@gravity-ui/uikit';\nimport {IBrowser, IDevice} from 'ua-parser-js';\n\nimport {Locale} from '../models/locale';\n\nexport enum Theme {\n    Light = 'light',\n    Dark = 'dark',\n}\n\nexport interface ClassNameProps {\n    className?: string;\n}\n\nexport type Author = {\n    id: number | string;\n    avatar: string | null;\n    createdAt: string;\n    updatedAt: string;\n    firstName: string | null;\n    secondName: string | null;\n    description: string | null;\n    fullDescription: string | null;\n    shortDescription: string | null;\n} & {\n    [x: string]: string | null;\n};\n\nexport type Query = Record<string, number | string | null>;\n\n//page models\n\nexport interface Menu {\n    title: string;\n}\n\nexport interface WithDeviceProps {\n    device: IDevice;\n    browser: IBrowser;\n    isRobot: boolean;\n}\n\nexport interface PostsProps {\n    posts: PostData[];\n    count: number;\n    totalCount: number;\n    pinnedPost?: PostData;\n}\n\nexport type Tag = {\n    slug: string;\n    name: string;\n    createdAt?: string;\n    updatedAt?: string;\n    icon?: string;\n    isDeleted?: boolean;\n    locale?: string;\n    blogTagId?: number | string;\n    count?: number;\n};\n\nexport interface PostData {\n    author?: string;\n    authors?: Author[];\n    blogPostId?: number | string;\n    content?: string;\n    date: string;\n    description?: string;\n    hasUserLike: boolean;\n    htmlTitle: string;\n    id: number;\n    image: string;\n    isPublished?: boolean;\n    sharedImage?: string;\n    likes: number;\n    locale: Locale;\n    metaDescription?: string | null;\n    metaTitle?: string | null;\n    readingTime?: number;\n    shareDescription?: string;\n    shareImage?: string;\n    shareTitle?: string;\n    slug: string;\n    keywords?: string[];\n    tags: Tag[];\n    textTitle: string;\n    title: string;\n    url: string;\n    noIndex?: boolean;\n}\n\nexport enum BlockType {\n    Header = 'blog-header-block',\n    YFM = 'blog-yfm-block',\n    Layout = 'blog-layout-block',\n    Media = 'blog-media-block',\n    Banner = 'blog-banner-block',\n    CTA = 'blog-cta-block',\n    ColoredText = 'blog-colored-text-block',\n    Author = 'blog-author-block',\n    Suggest = 'blog-suggest-block',\n    Meta = 'blog-meta-block',\n    Feed = 'blog-feed-block',\n    Form = 'blog-form-block',\n    CompactMedia = 'blog-compact-media-block',\n    Take = 'blog-take-block',\n    SideCardList = 'blog-side-card-list-block',\n}\n\nexport type MetaProps = {\n    metaComponent: JSX.Element;\n    needHelmetWrapper: boolean;\n};\n\nexport type MetaOrganizationType = {\n    url: string;\n    appTitle: string;\n    legalName: string;\n    supportEmail: string;\n};\n\nexport interface PostMetaProps {\n    title: string;\n    date: string;\n    image: string;\n    canonicalUrl: string;\n    content?: string;\n    description?: string;\n    sharing: {\n        shareTitle: string;\n        shareDescription: string;\n        shareImage: string;\n        shareGenImage: string;\n        shareGenTitle: string;\n    };\n    keywords?: string[];\n    noIndex?: boolean;\n    authors?: Author[];\n    tags?: Tag[];\n    organization: MetaOrganizationType;\n}\n\nexport type ToggleLikeCallbackType = ({\n    postId,\n    hasLike,\n}: {\n    postId?: number | string;\n    hasLike?: boolean;\n}) => void;\n\nexport interface HeaderBlockProps extends PageConstructorHeaderBlockProps {\n    backLink?: {\n        url: string;\n        title: React.ReactNode;\n    };\n}\n\nexport type GetPostsRequest = {\n    page: number;\n    perPage: number;\n    savedOnly: boolean;\n    search: string | undefined;\n    [filterParam: string]: string | number | boolean | undefined;\n};\n\nexport type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;\n\nexport type HandleChangeQueryParams = (params: Query) => void;\n\nexport enum DefaultEventNames {\n    ShareButton = 'share-button-click',\n    SaveButton = 'save-button-click',\n    ShowMore = 'show-more-button-click',\n    PaginatorHome = 'paginator-home-button-click',\n    PaginatorNext = 'paginator-next-button-click',\n    PaginatorPage = 'paginator-page-button-click',\n    Tag = 'selector-tag-click',\n    Service = 'selector-service-click',\n    SaveOnly = 'save-only-button-click',\n}\n\nexport type FetchArgs = {\n    page?: number;\n    query: Query;\n};\n\nexport interface QAProps {\n    qa?: string;\n}\n\ntype FilterConfigBase = {\n    /** The key used in queryParams and passed to handleLoadData query */\n    queryParamName: string;\n    /** Optional analytics events fired when this control's value changes */\n    analyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SelectFilterConfig = FilterConfigBase &\n    Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {\n        type?: 'select';\n        /** The selectable items for this filter */\n        options: SelectOption[];\n        /** Label shown when nothing is selected (acts as \"All ...\" placeholder) */\n        allLabel: string;\n        /** Optional QA attribute forwarded to the switcher */\n        qa?: string;\n    };\n\nexport type SearchFilterConfig = FilterConfigBase & {\n    type: 'search';\n    /** Placeholder text for the search input */\n    placeholder?: string;\n};\n\nexport type SavedOnlyFilterConfig = FilterConfigBase & {\n    type: 'savedOnly';\n};\n\nexport type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;\n\n/**\n * Filters can be supplied either as a flat array (all filters in one row)\n * or as an array of rows (each inner array is rendered as a separate row).\n *\n * @example Single row (backward-compatible)\n * filters: [searchFilter, tagsFilter]\n *\n * @example Multiple rows\n * filters: [[searchFilter, savedOnlyFilter], [tagsFilter, serviceFilter]]\n */\nexport type FiltersConfig = FilterConfig[] | FilterConfig[][];\n\nexport function normalizeFiltersToRows(filters: FiltersConfig): FilterConfig[][] {\n    if (filters.length === 0) {\n        return [];\n    }\n\n    // If the first element is itself an array, the input is already multi-row.\n    if (Array.isArray(filters[0])) {\n        return filters as FilterConfig[][];\n    }\n\n    return [filters as FilterConfig[]];\n}\n\nexport enum PostCardSize {\n    SMALL = 's',\n    MEDIUM = 'm',\n}\n\nexport enum PostCardTitleHeadingLevel {\n    H2 = 'h2',\n    H3 = 'h3',\n}\n\nexport interface TransformPostOptions {\n    plugins?: MarkdownItPluginCb[];\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAmFD,MAAM,CAAN,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,KAAT,SAAS,QAgBpB;AA8DD,MAAM,CAAN,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;AAsED,MAAM,UAAU,sBAAsB,CAAC,OAAsB;IACzD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5B,OAAO,OAA2B,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,OAAyB,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,4BAAY,CAAA;AAChB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACjC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACb,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,QAGpC","sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';\nimport {\n    AnalyticsEventsProp,\n    HeaderBlockProps as PageConstructorHeaderBlockProps,\n} from '@gravity-ui/page-constructor';\nimport {SelectOption, SelectProps} from '@gravity-ui/uikit';\nimport {IBrowser, IDevice} from 'ua-parser-js';\n\nimport {Locale} from '../models/locale';\n\nexport enum Theme {\n    Light = 'light',\n    Dark = 'dark',\n}\n\nexport interface ClassNameProps {\n    className?: string;\n}\n\nexport type Author = {\n    id: number | string;\n    avatar: string | null;\n    createdAt: string;\n    updatedAt: string;\n    firstName: string | null;\n    secondName: string | null;\n    description: string | null;\n    fullDescription: string | null;\n    shortDescription: string | null;\n} & {\n    [x: string]: string | null;\n};\n\nexport type Query = Record<string, number | string | null>;\n\n//page models\n\nexport interface Menu {\n    title: string;\n}\n\nexport interface WithDeviceProps {\n    device: IDevice;\n    browser: IBrowser;\n    isRobot: boolean;\n}\n\nexport interface PostsProps {\n    posts: PostData[];\n    count: number;\n    totalCount: number;\n    pinnedPost?: PostData;\n}\n\nexport type Tag = {\n    slug: string;\n    name: string;\n    createdAt?: string;\n    updatedAt?: string;\n    icon?: string;\n    isDeleted?: boolean;\n    locale?: string;\n    blogTagId?: number | string;\n    count?: number;\n};\n\nexport interface PostData {\n    author?: string;\n    authors?: Author[];\n    blogPostId?: number | string;\n    content?: string;\n    date: string;\n    description?: string;\n    hasUserLike: boolean;\n    htmlTitle: string;\n    id: number;\n    image: string;\n    isPublished?: boolean;\n    sharedImage?: string;\n    likes: number;\n    locale: Locale;\n    metaDescription?: string | null;\n    metaTitle?: string | null;\n    readingTime?: number;\n    shareDescription?: string;\n    shareImage?: string;\n    shareTitle?: string;\n    slug: string;\n    keywords?: string[];\n    tags: Tag[];\n    textTitle: string;\n    title: string;\n    url: string;\n    noIndex?: boolean;\n}\n\nexport enum BlockType {\n    Header = 'blog-header-block',\n    YFM = 'blog-yfm-block',\n    Layout = 'blog-layout-block',\n    Media = 'blog-media-block',\n    Banner = 'blog-banner-block',\n    CTA = 'blog-cta-block',\n    ColoredText = 'blog-colored-text-block',\n    Author = 'blog-author-block',\n    Suggest = 'blog-suggest-block',\n    Meta = 'blog-meta-block',\n    Feed = 'blog-feed-block',\n    Form = 'blog-form-block',\n    CompactMedia = 'blog-compact-media-block',\n    Take = 'blog-take-block',\n    SideCardList = 'blog-side-card-list-block',\n}\n\nexport type MetaProps = {\n    metaComponent: JSX.Element;\n    needHelmetWrapper: boolean;\n};\n\nexport type MetaOrganizationType = {\n    url: string;\n    appTitle: string;\n    legalName: string;\n    supportEmail: string;\n};\n\nexport interface PostMetaProps {\n    title: string;\n    date: string;\n    image: string;\n    canonicalUrl: string;\n    content?: string;\n    description?: string;\n    sharing: {\n        shareTitle: string;\n        shareDescription: string;\n        shareImage: string;\n        shareGenImage: string;\n        shareGenTitle: string;\n    };\n    keywords?: string[];\n    noIndex?: boolean;\n    authors?: Author[];\n    tags?: Tag[];\n    organization: MetaOrganizationType;\n}\n\nexport type ToggleLikeCallbackType = ({\n    postId,\n    hasLike,\n}: {\n    postId?: number | string;\n    hasLike?: boolean;\n}) => void;\n\nexport interface HeaderBlockProps extends PageConstructorHeaderBlockProps {\n    backLink?: {\n        url: string;\n        title: React.ReactNode;\n    };\n}\n\nexport type GetPostsRequest = {\n    page: number;\n    perPage: number;\n    savedOnly: boolean;\n    search: string | undefined;\n    [filterParam: string]: string | number | boolean | undefined;\n};\n\nexport type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;\n\nexport type HandleChangeQueryParams = (params: Query) => void;\n\nexport enum DefaultEventNames {\n    ShareButton = 'share-button-click',\n    SaveButton = 'save-button-click',\n    ShowMore = 'show-more-button-click',\n    PaginatorHome = 'paginator-home-button-click',\n    PaginatorNext = 'paginator-next-button-click',\n    PaginatorPage = 'paginator-page-button-click',\n    Tag = 'selector-tag-click',\n    Service = 'selector-service-click',\n    SaveOnly = 'save-only-button-click',\n}\n\nexport type FetchArgs = {\n    page?: number;\n    query: Query;\n};\n\nexport interface QAProps {\n    qa?: string;\n}\n\ntype FilterConfigBase = {\n    /** The key used in queryParams and passed to handleLoadData query */\n    queryParamName: string;\n    /** Optional analytics events fired when this control's value changes */\n    analyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SelectFilterCloseData = {\n    selectedValues: string[];\n    changesCount: number;\n};\n\nexport type DynamicAnalyticsEventsProp<T> =\n    | AnalyticsEventsProp\n    | ((data: T) => AnalyticsEventsProp);\n\nexport type SelectFilterConfig = FilterConfigBase &\n    Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {\n        type?: 'select';\n        /** The selectable items for this filter */\n        options: SelectOption[];\n        /** Label shown when nothing is selected (acts as \"All ...\" placeholder) */\n        allLabel: string;\n        /** Optional QA attribute forwarded to the switcher */\n        qa?: string;\n        /** Optional analytics events fired when the select opens */\n        openAnalyticsEvents?: AnalyticsEventsProp;\n        /** Optional analytics events fired when the select closes */\n        closeAnalyticsEvents?: DynamicAnalyticsEventsProp<SelectFilterCloseData>;\n    };\n\nexport type SearchFilterConfig = FilterConfigBase & {\n    type: 'search';\n    /** Placeholder text for the search input */\n    placeholder?: string;\n    /** Optional analytics events fired when the search input is clicked */\n    clickAnalyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SavedOnlyFilterConfig = FilterConfigBase & {\n    type: 'savedOnly';\n    /** Optional analytics events fired with the next saved-only state */\n    clickAnalyticsEvents?: DynamicAnalyticsEventsProp<boolean>;\n};\n\nexport type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;\n\n/**\n * Filters can be supplied either as a flat array (all filters in one row)\n * or as an array of rows (each inner array is rendered as a separate row).\n *\n * @example Single row (backward-compatible)\n * filters: [searchFilter, tagsFilter]\n *\n * @example Multiple rows\n * filters: [[searchFilter, savedOnlyFilter], [tagsFilter, serviceFilter]]\n */\nexport type FiltersConfig = FilterConfig[] | FilterConfig[][];\n\nexport function normalizeFiltersToRows(filters: FiltersConfig): FilterConfig[][] {\n    if (filters.length === 0) {\n        return [];\n    }\n\n    // If the first element is itself an array, the input is already multi-row.\n    if (Array.isArray(filters[0])) {\n        return filters as FilterConfig[][];\n    }\n\n    return [filters as FilterConfig[]];\n}\n\nexport enum PostCardSize {\n    SMALL = 's',\n    MEDIUM = 'm',\n}\n\nexport enum PostCardTitleHeadingLevel {\n    H2 = 'h2',\n    H3 = 'h3',\n}\n\nexport interface TransformPostOptions {\n    plugins?: MarkdownItPluginCb[];\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "10.1.0",
+  "version": "10.1.1-alpha.1",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "type": "commonjs",

package/server/models/common.d.ts

@@ -169,6 +169,11 @@ type FilterConfigBase = {
     /** Optional analytics events fired when this control's value changes */
     analyticsEvents?: AnalyticsEventsProp;
 };
+export type SelectFilterCloseData = {
+    selectedValues: string[];
+    changesCount: number;
+};
+export type DynamicAnalyticsEventsProp<T> = AnalyticsEventsProp | ((data: T) => AnalyticsEventsProp);
 export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {
     type?: 'select';
     /** The selectable items for this filter */
@@ -177,14 +182,22 @@ export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple'
     allLabel: string;
     /** Optional QA attribute forwarded to the switcher */
     qa?: string;
+    /** Optional analytics events fired when the select opens */
+    openAnalyticsEvents?: AnalyticsEventsProp;
+    /** Optional analytics events fired when the select closes */
+    closeAnalyticsEvents?: DynamicAnalyticsEventsProp<SelectFilterCloseData>;
 };
 export type SearchFilterConfig = FilterConfigBase & {
     type: 'search';
     /** Placeholder text for the search input */
     placeholder?: string;
+    /** Optional analytics events fired when the search input is clicked */
+    clickAnalyticsEvents?: AnalyticsEventsProp;
 };
 export type SavedOnlyFilterConfig = FilterConfigBase & {
     type: 'savedOnly';
+    /** Optional analytics events fired with the next saved-only state */
+    clickAnalyticsEvents?: DynamicAnalyticsEventsProp<boolean>;
 };
 export type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;
 /**