@redocly/theme 0.40.6 → 0.41.0-rc.2

package/lib/components/Dropdown/DropdownMenu.d.ts

@@ -1,8 +1,10 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
     className?: string;
     role?: string;
+    footer?: React.ReactNode;
 } & ({
     items: DropdownMenuItemProps[];
 } | {

package/lib/components/Dropdown/DropdownMenu.js

@@ -15,7 +15,9 @@ function DropdownMenu(props) {
     if ('items' in props) {
         content = props.items.map((item, idx) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, Object.assign({ key: idx }, item), item.content)));
     }
-    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' }, content));
+    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' },
+        content,
+        props.footer || null));
 }
 exports.DropdownMenu = DropdownMenu;
 const DropdownMenuWrapper = styled_components_1.default.ul `

package/lib/components/Loaders/SpinnerLoader.d.ts

@@ -0,0 +1,5 @@
+export type LoadingProps = {
+    color: string;
+    size: string;
+};
+export declare function SpinnerLoader({ color, size }: LoadingProps): JSX.Element;

package/lib/components/Loaders/SpinnerLoader.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerLoader = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function SpinnerLoader({ color, size }) {
+    return react_1.default.createElement(Spinner, { color: color, size: size });
+}
+exports.SpinnerLoader = SpinnerLoader;
+const Spinner = styled_components_1.default.div `
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border: 3px solid ${({ color }) => color};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+//# sourceMappingURL=SpinnerLoader.js.map

package/lib/components/Search/FilterFields/SearchFilterFieldSelect.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SearchFacet, SearchFilterItem } from '../../../core/types';
+type SearchFilterFieldSelectProps = {
+    className?: string;
+    facet: SearchFacet;
+    filter: SearchFilterItem[];
+    query: string;
+    selectedValues: string[];
+    onChange: (value: string | string[]) => void;
+};
+export declare function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChange, }: SearchFilterFieldSelectProps): React.JSX.Element;
+export {};

package/lib/components/Search/FilterFields/SearchFilterFieldSelect.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchFilterFieldSelect = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const Select_1 = require("../../../components/Select/Select");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChange, }) {
+    const MAX_SELECT_OPTIONS = 20;
+    const { useFacetQuery, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+    const [selectOptions, setSelectOptions] = (0, react_1.useState)([]);
+    const isMultiple = facet.type === 'multi-select';
+    (0, react_1.useEffect)(() => {
+        setSelectOptions(getSelectOptions());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchFacet, facet]);
+    const onSearch = (value) => {
+        if (value === null) {
+            setSearchFacet(null);
+            setSearchFacetQuery(null);
+        }
+        else if (typeof value === 'string') {
+            setSearchFacetQuery({
+                query,
+                filter,
+                facetQuery: value,
+            });
+        }
+    };
+    const getSelectOptions = () => {
+        return searchFacet
+            ? searchFacet.values.map(facetValueToSelectOption)
+            : facet.values.map(facetValueToSelectOption);
+    };
+    const facetValueToSelectOption = (facetValue) => {
+        if (!facetValue) {
+            return { element: null, value: '' };
+        }
+        if (typeof facetValue === 'string') {
+            return {
+                element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
+                    react_1.default.createElement(FilterSelectOptionText, null, facetValue))),
+                value: facetValue,
+            };
+        }
+        else {
+            const { value, count, isCounterVisible } = facetValue;
+            return {
+                element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
+                    react_1.default.createElement(FilterSelectOptionText, null, value),
+                    isCounterVisible && react_1.default.createElement(CounterTag_1.CounterTag, null, count))),
+                value: value,
+            };
+        }
+    };
+    return (react_1.default.createElement(Select_1.Select, { value: selectedValues.length
+            ? isMultiple
+                ? selectedValues.map((value) => facetValueToSelectOption(value))
+                : facetValueToSelectOption(selectedValues[0])
+            : undefined, options: selectOptions, onChange: onChange, placeholder: `${translate('theme.search.filter.field.placeholder', 'Search')} ${facet.name.toLowerCase()}...`, alignment: "start", multiple: isMultiple, searchable: true, footer: selectOptions.length === MAX_SELECT_OPTIONS ? (react_1.default.createElement(FilterSelectFooter, null, "Search to show more items...")) : null, onSearch: onSearch }));
+}
+exports.SearchFilterFieldSelect = SearchFilterFieldSelect;
+const FilterSelectOptionWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--search-filter-field-select-option-gap);
+`;
+const FilterSelectOptionText = styled_components_1.default.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--search-filter-field-select-option-text-padding);
+`;
+const FilterSelectFooter = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-filter-field-select-footer-padding);
+  color: var(--search-filter-field-select-footer-text-color);
+`;
+//# sourceMappingURL=SearchFilterFieldSelect.js.map

package/lib/components/Search/FilterFields/SearchFilterFieldTags.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SearchFacet } from '../../../core/types';
+type SearchFilterFieldTagsProps = {
+    className?: string;
+    facet: SearchFacet;
+    selectedValues: string[];
+    onChange: (value: string | string[]) => void;
+};
+export declare function SearchFilterFieldTags({ className, facet, selectedValues, onChange, }: SearchFilterFieldTagsProps): React.JSX.Element;
+export {};

package/lib/components/Search/FilterFields/SearchFilterFieldTags.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchFilterFieldTags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../../components/Tag/Tag");
+function SearchFilterFieldTags({ className, facet, selectedValues, onChange, }) {
+    return (react_1.default.createElement(FilterTagsWrapper, { "data-component-name": "Search/FilterFields/SearchFilterFieldTags", className: className }, facet.values.map((facetCount, index) => {
+        const { value, count, isCounterVisible } = facetCount;
+        const active = selectedValues.includes(value);
+        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, color: value, onClick: () => {
+                const values = active
+                    ? selectedValues.filter((item) => item !== value)
+                    : [...selectedValues, value];
+                onChange(values);
+            }, active: active, borderless: true },
+            value,
+            " ",
+            isCounterVisible && react_1.default.createElement("span", null, count)));
+    })));
+}
+exports.SearchFilterFieldTags = SearchFilterFieldTags;
+const FilterTagsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-filter-field-tags-gap);
+`;
+const FilterTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
+  text-transform: uppercase;
+  cursor: pointer;
+  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
+  margin: var(--search-filter-field-tags-tag-margin);
+`;
+//# sourceMappingURL=SearchFilterFieldTags.js.map

package/lib/components/Search/Search.js

@@ -10,7 +10,7 @@ const SearchTrigger_1 = require("../../components/Search/SearchTrigger");
 const SearchDialog_1 = require("../../components/Search/SearchDialog");
 const hooks_1 = require("../../core/hooks");
 function Search({ className }) {
-    const { isOpen, onOpen, onClose } = (0, hooks_1.useSearch)();
+    const { isOpen, onOpen, onClose } = (0, hooks_1.useSearchDialog)();
     return (react_1.default.createElement(SearchWrapper, { "data-component-name": "Search/Search", className: className },
         react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: onOpen }),
         isOpen && react_1.default.createElement(SearchDialog_1.SearchDialog, { onClose: onClose })));

package/lib/components/Search/SearchDialog.js

@@ -39,12 +39,16 @@ const SearchSuggestedPages_1 = require("../../components/Search/SearchSuggestedP
 const hooks_1 = require("../../core/hooks");
 const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const SearchFilter_1 = require("../../components/Search/SearchFilter");
+const SearchGroups_1 = require("../../components/Search/SearchGroups");
+const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 function SearchDialog({ onClose, className }) {
-    const { useTranslate, useCurrentProduct, useFuseSearch, useProducts } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useCurrentProduct, useSearch, useProducts } = (0, hooks_1.useThemeHooks)();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
-    const { query, setQuery, items, isLoading } = useFuseSearch(product === null || product === void 0 ? void 0 : product.name);
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore } = useSearch(product === null || product === void 0 ? void 0 : product.name);
+    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onTopFacetsReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
     (0, hooks_1.useDialogHotKeys)(modalRef, onClose);
@@ -59,29 +63,64 @@ function SearchDialog({ onClose, className }) {
     };
     const mapItem = (item) => {
         let itemProduct;
-        if (!product && item.product) {
-            const resolvedProduct = products.find((product) => { var _a; return product.slug.match(`/${(_a = item.product) === null || _a === void 0 ? void 0 : _a.folder}/`); });
+        if (!product && item.document.product) {
+            const resolvedProduct = products.find((product) => { var _a; return product.slug.match(`/${(_a = item.document.product) === null || _a === void 0 ? void 0 : _a.folder}/`); });
             itemProduct = resolvedProduct
                 ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
                 : undefined;
         }
-        return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item, product: itemProduct });
+        return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.document.id, item: item, product: itemProduct });
     };
+    const showLoadMore = (groupKey, currentCount = 0) => {
+        const topFacet = facets.find((facet) => facet.isTop);
+        let needLoadMore = false;
+        if (topFacet) {
+            const groupValue = topFacet.values.find((value) => {
+                if (typeof value === 'object') {
+                    return value.value === groupKey;
+                }
+                else
+                    return false;
+            });
+            needLoadMore = groupValue ? groupValue.count > currentCount : false;
+        }
+        return needLoadMore;
+    };
+    const showResults = !!((filter && filter.length) || query);
     return (react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
         react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
             react_1.default.createElement(SearchDialogHeader, null,
-                react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading, "data-translation-key": "theme.search.label" }),
-                product && (react_1.default.createElement(SearchProductTag, { color: "product" },
-                    product.name,
-                    react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
-            react_1.default.createElement(SearchDialogBody, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "theme.search.noResults" }, translate('theme.search.noResults', 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
-                react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
+                product && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SearchProductTag, { color: "product" },
+                        product.name,
+                        react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
+                react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, onFilterToggle: onFilterToggle, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isSearchLoading, "data-translation-key": "theme.search.label" })),
+            react_1.default.createElement(SearchDialogBody, null,
+                react_1.default.createElement(SearchDialogBodyMainView, null,
+                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onTopFacetsReset: onTopFacetsReset }),
+                    showResults ? (items && Object.keys(items).some((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) ? (Object.keys(items).map((key) => {
+                        var _a, _b, _c;
+                        return ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.Fragment, { key: key },
+                            react_1.default.createElement(SearchGroupTitle, null, key), (_b = items[key]) === null || _b === void 0 ? void 0 :
+                            _b.map(mapItem),
+                            showLoadMore(key, ((_c = items[key]) === null || _c === void 0 ? void 0 : _c.length) || 0) && (react_1.default.createElement(SearchGroupFooter, { "data-translation-key": "theme.search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('theme.search.showMore', 'Show more'))))) : null;
+                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, null,
+                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
+                        translate('theme.search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "theme.search.noResults" },
+                        react_1.default.createElement("b", null, translate('theme.search.noResults.title', 'No results')),
+                        translate('theme.search.noResults.description', 'Prease, try with a different query.')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
+                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
+                isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset })))),
             react_1.default.createElement(SearchDialogFooter, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "theme.search.keys.navigate", combination: "Tab", text: translate('theme.search.keys.navigate', 'to navigate') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "theme.search.keys.select", combination: "\u23CE", text: translate('theme.search.keys.select', 'to select') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "theme.search.keys.exit", combination: "Esc", text: translate('theme.search.keys.exit', 'to exit') })),
+                isSearchLoading && (react_1.default.createElement(SearchLoading, null,
+                    react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
+                    translate('theme.search.loading', 'Loading...'))),
                 react_1.default.createElement(SearchCancelButton, { "data-translation-key": "theme.search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('theme.search.cancel', 'Cancel'))))));
 }
 exports.SearchDialog = SearchDialog;
@@ -100,7 +139,6 @@ const SearchOverlay = styled_components_1.default.div `
 const SearchDialogWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   overflow: auto;
   width: 100vw;
   height: 100vh;
@@ -116,47 +154,65 @@ const SearchDialogWrapper = styled_components_1.default.div `
     max-height: 95vh;
     height: auto;
     resize: both;
-    min-width: 300px;
-    min-height: 200px;
   }
 `;
 const SearchDialogHeader = styled_components_1.default.header `
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--border-color-secondary);
-  background-color: var(--search-input-bg-color);
-  padding: var(--spacing-sm);
+  border-bottom: var(--search-modal-border);
+  background-color: var(--search-modal-header-bg-color);
+  padding: var(--search-modal-header-padding);
 `;
 const SearchDialogBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
   flex-grow: 1;
-  overflow-y: scroll;
-  overscroll-behavior: contain;
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     height: var(--search-modal-min-height);
   }
 `;
+const SearchDialogBodyMainView = styled_components_1.default.div `
+  flex: 2;
+  flex-grow: 2;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  border-right: var(--search-modal-border);
+`;
+const SearchDialogBodyFilterView = styled_components_1.default.div `
+  overflow: scroll;
+`;
 const SearchDialogFooter = styled_components_1.default.footer `
-  padding: var(--spacing-sm);
-  border-top: 1px solid var(--border-color-secondary);
+  display: flex;
+  gap: var(--search-modal-footer-gap);
+  padding: var(--search-modal-footer-padding);
+  border-top: var(--search-modal-border);
 `;
 const SearchShortcuts = styled_components_1.default.div `
   display: none;
   justify-content: flex-start;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--search-shortcuts-gap);
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     display: flex;
   }
 `;
 const SearchMessage = styled_components_1.default.div `
-  padding: var(--spacing-lg);
-  color: var(--search-item-title-text-color);
+  display: flex;
+  height: 40%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: var(--search-message-font-size);
+  font-weight: var(--search-message-font-weight);
+  line-height: var(--search-message-line-height);
+  color: var(--search-message-text-color);
+  gap: var(--search-message-gap);
 `;
 const SearchProductTag = (0, styled_components_1.default)(Tag_1.Tag) `
   --tag-border-radius: var(--border-radius);
-
+  border: none;
   margin: var(--spacing-xs) var(--spacing-sm) !important;
 `;
 const SearchCancelButton = (0, styled_components_1.default)(Button_1.Button) `
@@ -166,4 +222,25 @@ const SearchCancelButton = (0, styled_components_1.default)(Button_1.Button) `
     display: none;
   }
 `;
+const SearchGroupTitle = styled_components_1.default.div `
+  border-bottom: var(--search-modal-border);
+  padding: var(--search-group-title-padding);
+  background-color: var(--search-group-title-bg-color);
+`;
+const SearchGroupFooter = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  padding: var(--search-group-footer-padding);
+  color: var(--search-group-footer-text-color);
+  cursor: pointer;
+`;
+const SearchLoading = styled_components_1.default.div `
+  display: none;
+  align-items: center;
+  gap: var(--spacing-xs);
+
+  @media screen and (min-width: ${utils_1.breakpoints.small}) {
+    display: flex;
+  }
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/SearchFilter.d.ts

@@ -0,0 +1,11 @@
+import type { SearchFilterItem, SearchFacet } from '../../core/types';
+export type SearchFilterProps = {
+    className?: string;
+    facets: SearchFacet[];
+    filter: SearchFilterItem[];
+    query: string;
+    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    onFilterReset: () => void;
+    onFacetReset: (field: string) => void;
+};
+export declare function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;

package/lib/components/Search/SearchFilter.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchFilter = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const CleanIcon_1 = require("../../icons/CleanIcon/CleanIcon");
+const SearchFilterField_1 = require("../../components/Search/SearchFilterField");
+const hooks_1 = require("../../core/hooks");
+function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (React.createElement(SearchFilterWrapper, { "data-component-name": "Search/SearchFilter", className: className },
+        React.createElement(SearchFilterHeader, null,
+            React.createElement("span", { "data-translation-key": "theme.search.filter.title" }, translate('theme.search.filter.title', 'Advanced filter')),
+            React.createElement(Button_1.Button, { "data-translation-key": "theme.search.filter.reset", onClick: onFilterReset, variant: "ghost", icon: React.createElement(CleanIcon_1.CleanIcon, null) }, translate('theme.search.filter.reset', 'Reset filters'))),
+        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, onFilterChange: onFilterChange, onFacetReset: onFacetReset, filter: filter, query: query }))))));
+}
+exports.SearchFilter = SearchFilter;
+const SearchFilterWrapper = styled_components_1.default.div `
+  width: var(--search-filter-width);
+  display: flex;
+  flex-direction: column;
+  padding: var(--search-filter-padding);
+  font-size: var(--search-filter-font-size);
+  font-weight: var(--search-filter-font-weight);
+  line-height: var(--search-filter-line-height);
+`;
+const SearchFilterHeader = styled_components_1.default.div `
+  position: sticky;
+  top: 0px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--search-filter-header-padding);
+  color: var(--search-filter-header-text-color);
+  background-color: var(--search-filter-bg-color);
+  z-index: var(--search-filter-header-z-index);
+`;
+const SearchFilterFields = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-filter-fields-gap);
+`;
+//# sourceMappingURL=SearchFilter.js.map

package/lib/components/Search/SearchFilterField.d.ts

@@ -0,0 +1,11 @@
+import type { SearchFacet, SearchFilterItem } from '../../core/types';
+type SearchFilterFieldProps = {
+    className?: string;
+    facet: SearchFacet;
+    filter: SearchFilterItem[];
+    query: string;
+    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    onFacetReset: (filed: string) => void;
+};
+export declare function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
+export {};

package/lib/components/Search/SearchFilterField.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchFilterField = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
+const core_1 = require("../../core");
+const SearchFilterFieldSelect_1 = require("../../components/Search/FilterFields/SearchFilterFieldSelect");
+const SearchFilterFieldTags_1 = require("../../components/Search/FilterFields/SearchFilterFieldTags");
+function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }) {
+    var _a;
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const selectedValues = ((_a = filter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
+    const onChange = (value) => {
+        onFilterChange(facet.field, value, facet.isTop);
+    };
+    const onReset = () => {
+        onFacetReset(facet.field);
+    };
+    return (react_1.default.createElement(FilterFieldWrapper, { "data-component-name": "Search/SearchFilterField", className: className },
+        react_1.default.createElement(FilterFieldLabel, null,
+            facet.name,
+            selectedValues.length > 0 && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.search.filter.field.reset", icon: react_1.default.createElement(ResetIcon_1.ResetIcon, null), variant: "ghost", size: "small", onClick: onReset }, translate('theme.search.filter.field.reset', 'Reset')))),
+        ['select', 'multi-select'].includes(facet.type) && (react_1.default.createElement(SearchFilterFieldSelect_1.SearchFilterFieldSelect, { facet: facet, filter: filter, query: query, selectedValues: selectedValues, onChange: onChange })),
+        facet.type === 'tags' && (react_1.default.createElement(SearchFilterFieldTags_1.SearchFilterFieldTags, { facet: facet, selectedValues: selectedValues, onChange: onChange }))));
+}
+exports.SearchFilterField = SearchFilterField;
+const FilterFieldWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const FilterFieldLabel = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+//# sourceMappingURL=SearchFilterField.js.map

package/lib/components/Search/SearchGroups.d.ts

@@ -0,0 +1,9 @@
+import { type SearchFacet, type SearchFilterItem } from '../../index.js';
+type SearchGroupsProps = {
+    facets: SearchFacet[];
+    searchFilter: SearchFilterItem[];
+    onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
+    onTopFacetsReset: () => void;
+};
+export declare function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }: SearchGroupsProps): JSX.Element;
+export {};