@redocly/theme 0.47.1 → 0.48.0

package/lib/components/Feedback/Mood.d.ts

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",
@@ -25,7 +25,7 @@ export type MoodProps = {
             neutral?: ReasonsSettingsSchema;
             dissatisfied?: ReasonsSettingsSchema;
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Mood.js

@@ -46,7 +46,7 @@ var MOOD_STATES;
     MOOD_STATES["DISSATISFIED"] = "dissatisfied";
 })(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
 function Mood({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [score, setScore] = React.useState('');
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
@@ -109,7 +109,7 @@ function Mood({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const onSubmitMoodForm = () => {
         onSubmit({
             score: remapScore(score),
@@ -160,10 +160,10 @@ function Mood({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Feedback/Rating.d.ts

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {
@@ -21,7 +21,7 @@ export type RatingProps = {
             component?: string;
             items: string[];
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Rating.js

@@ -39,7 +39,7 @@ const Stars_1 = require("../../components/Feedback/Stars");
 const Button_1 = require("../../components/Button/Button");
 exports.FEEDBACK_MAX_RATING = 5;
 function Rating({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [reasons, setReasons] = React.useState([]);
@@ -71,7 +71,7 @@ function Rating({ settings, onSubmit, className }) {
     const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     (0, react_1.useEffect)(() => {
         if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitRatingForm();
@@ -102,10 +102,10 @@ function Rating({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Feedback/Scale.d.ts

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {
@@ -23,7 +23,7 @@ export type ScaleProps = {
             component?: string;
             items: string[];
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Scale.js

@@ -39,7 +39,7 @@ const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
 exports.MAX_SCALE = 10;
 function Scale({ settings, onSubmit, className }) {
-    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [score, setScore] = React.useState(0);
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
@@ -59,7 +59,7 @@ function Scale({ settings, onSubmit, className }) {
     const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const handleCancel = () => {
         setScore(0);
         setComment('');
@@ -109,10 +109,10 @@ function Scale({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } }))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,4 +1,4 @@
-import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;
@@ -18,7 +18,7 @@ export type SentimentProps = {
             like?: ReasonsSettingsSchema;
             dislike?: ReasonsSettingsSchema;
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Sentiment.js

@@ -38,7 +38,7 @@ const Button_1 = require("../../components/Button/Button");
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
 function Sentiment({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
@@ -74,7 +74,7 @@ function Sentiment({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -141,10 +141,10 @@ function Sentiment({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Search/SearchDialog.js

@@ -52,8 +52,8 @@ function SearchDialog({ onClose, className }) {
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
     const [mode, setMode] = (0, react_1.useState)('search');
     const autoSearchDisabled = mode !== 'search';
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
-    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onTopFacetsReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
+    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const aiSearch = useAiSearch({ filter });
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
@@ -80,10 +80,10 @@ function SearchDialog({ onClose, className }) {
         return react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct });
     };
     const showLoadMore = (groupKey, currentCount = 0) => {
-        const topFacet = facets.find((facet) => facet.isTop);
+        const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
-        if (topFacet) {
-            const groupValue = topFacet.values.find((value) => {
+        if (groupFacet) {
+            const groupValue = groupFacet.values.find((value) => {
                 if (typeof value === 'object') {
                     return value.value === groupKey;
                 }
@@ -124,11 +124,11 @@ function SearchDialog({ onClose, className }) {
                     showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchDialogBodyMainView, null,
-                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onTopFacetsReset: onTopFacetsReset }),
+                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
                     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 :
+                            react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, 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": "search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('search.showMore', 'Show more'))))) : null;
                     })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, null,
@@ -138,7 +138,7 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && 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(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
             mode === 'search' && (react_1.default.createElement(SearchDialogFooter, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),

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

@@ -4,8 +4,9 @@ export type SearchFilterProps = {
     facets: SearchFacet[];
     filter: SearchFilterItem[];
     query: string;
-    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
     onFilterReset: () => void;
     onFacetReset: (field: string) => void;
 };
-export declare function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;
+export declare function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;

package/lib/components/Search/SearchFilter.js

@@ -33,14 +33,14 @@ 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, }) {
+function SearchFilter({ className, facets, filter, query, quickFilterFields, 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": "search.filter.title" }, translate('search.filter.title', 'Advanced filter')),
             React.createElement(Button_1.Button, { "data-translation-key": "search.filter.reset", onClick: onFilterReset, variant: "ghost", icon: React.createElement(CleanIcon_1.CleanIcon, null) }, translate('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 }))))));
+        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
 }
 const SearchFilterWrapper = styled_components_1.default.div `
   width: var(--search-filter-width);

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

@@ -4,8 +4,9 @@ type SearchFilterFieldProps = {
     facet: SearchFacet;
     filter: SearchFilterItem[];
     query: string;
-    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
     onFacetReset: (filed: string) => void;
 };
-export declare function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
+export declare function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
 export {};

package/lib/components/Search/SearchFilterField.js

@@ -11,13 +11,13 @@ const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
 const hooks_1 = require("../../core/hooks");
 const SearchFilterFieldSelect_1 = require("../../components/Search/FilterFields/SearchFilterFieldSelect");
 const SearchFilterFieldTags_1 = require("../../components/Search/FilterFields/SearchFilterFieldTags");
-function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }) {
+function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }) {
     var _a;
     const { useTranslate } = (0, hooks_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);
+        onFilterChange(facet.field, value, facet.field in quickFilterFields);
     };
     const onReset = () => {
         onFacetReset(facet.field);

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

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

package/lib/components/Search/SearchGroups.js

@@ -30,8 +30,8 @@ exports.SearchGroups = SearchGroups;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
-function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }) {
-    const groupFacets = facets.filter((facet) => facet.isTop);
+function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }) {
+    const groupFacets = facets.filter((facet) => facet.field === groupField);
     const handleGroupTagClick = (value, fieldId, active, currentValues) => {
         const values = active
             ? currentValues.filter((item) => item !== value)
@@ -39,7 +39,7 @@ function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset,
         onFilterChange(fieldId, values, true);
     };
     return (React.createElement(SearchGroupsWrapper, null,
-        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isTop), onClick: () => searchFilter.some((item) => item.isTop) && onTopFacetsReset() }, "All"),
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset() }, "All"),
         React.createElement(Divider, null),
         groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
             var _a;

package/lib/core/hooks/__mocks__/search/use-search-filter.d.ts

@@ -4,5 +4,5 @@ export declare const useSearchFilter: jest.Mock<{
     onFilterChange: () => void;
     onFilterToggle: () => void;
     onFilterReset: () => void;
-    onTopFacetsReset: () => void;
+    onQuickFilterReset: () => void;
 }, [], any>;

package/lib/core/hooks/__mocks__/search/use-search-filter.js

@@ -8,7 +8,7 @@ exports.useSearchFilter = jest.fn(() => {
         onFilterChange: () => { },
         onFilterToggle: () => { },
         onFilterReset: () => { },
-        onTopFacetsReset: () => { },
+        onQuickFilterReset: () => { },
     };
 });
 //# sourceMappingURL=use-search-filter.js.map

package/lib/core/hooks/search/use-search-filter.d.ts

@@ -1,9 +1,9 @@
 import type { SearchFilterItem } from '../../../core/types';
 export declare function useSearchFilter(filter: SearchFilterItem[], setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>): {
     onFacetReset: (field: string) => void;
-    onTopFacetsReset: () => void;
-    onFilterChange: (field: string, value: string | string[] | undefined, isTop?: boolean) => void;
+    onFilterChange: (field: string, value: string | string[] | undefined, isQuickFilter?: boolean) => void;
     onFilterReset: () => void;
     onFilterToggle: () => void;
+    onQuickFilterReset: () => void;
     isFilterOpen: boolean;
 };

package/lib/core/hooks/search/use-search-filter.js

@@ -7,7 +7,7 @@ function useSearchFilter(filter, setFilter) {
     const onFilterToggle = (0, react_1.useCallback)(() => {
         setIsFilterOpen(!isFilterOpen);
     }, [isFilterOpen]);
-    const onFilterChange = (field, value, isTop) => {
+    const onFilterChange = (field, value, isQuickFilter) => {
         const values = value ? (Array.isArray(value) ? value : [value]) : [];
         const _filter = [...filter];
         const fieldIndex = _filter.findIndex((filter) => filter.field === field);
@@ -18,16 +18,16 @@ function useSearchFilter(filter, setFilter) {
         else {
             if (!values.length)
                 return;
-            _filter.push({ field, values, isTop });
+            _filter.push({ field, values, isQuickFilter });
         }
         setFilter(_filter.filter((item) => item.values.length));
     };
     const onFilterReset = () => {
         setFilter([]);
     };
-    const onTopFacetsReset = () => {
+    const onQuickFilterReset = () => {
         const _filter = [...filter];
-        setFilter(_filter.filter((item) => !item.isTop));
+        setFilter(_filter.filter((item) => !item.isQuickFilter));
     };
     const onFacetReset = (field) => {
         const _filter = [...filter];
@@ -39,10 +39,10 @@ function useSearchFilter(filter, setFilter) {
     };
     return {
         onFacetReset,
-        onTopFacetsReset,
         onFilterChange,
         onFilterReset,
         onFilterToggle,
+        onQuickFilterReset,
         isFilterOpen,
     };
 }

package/lib/core/types/hooks.d.ts

@@ -54,6 +54,7 @@ export type ThemeHooks = {
         items: Record<string, SearchItemData[] | null>;
         isSearchLoading: boolean;
         facets: SearchFacet[];
+        groupField: string;
         setLoadMore: React.Dispatch<React.SetStateAction<{
             groupKey: string;
             offset: number;

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.anonymousUserEmail.placeholder' | 'feedback.settings.anonymousUserEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/types/search.d.ts

@@ -51,7 +51,6 @@ export type SearchFacet = {
     field: string;
     type: SearchFacetType;
     values: string[] | SearchFacetCount[];
-    isTop?: boolean;
     index?: number;
 };
 export type SearchFacetCount = {
@@ -68,5 +67,5 @@ export type SearchFacetType = 'input' | 'multi-select' | 'select' | 'switch' | '
 export type SearchFilterItem = {
     field: string;
     values: string[];
-    isTop?: boolean;
+    isQuickFilter?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.47.1",
+  "version": "0.48.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -86,7 +86,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.19.4"
+    "@redocly/config": "0.20.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Feedback/Mood.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -41,7 +41,7 @@ export type MoodProps = {
       neutral?: ReasonsSettingsSchema;
       dissatisfied?: ReasonsSettingsSchema;
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -52,7 +52,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState('');
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -131,8 +131,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
     onSubmit({
@@ -241,18 +240,18 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Rating.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -35,7 +35,7 @@ export type RatingProps = {
       component?: string;
       items: string[];
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -46,7 +46,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
@@ -83,8 +83,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   useEffect(() => {
     if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
@@ -154,18 +153,18 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Scale.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { breakpoints } from '@redocly/theme/core/utils';
@@ -37,7 +37,7 @@ export type ScaleProps = {
       component?: string;
       items: string[];
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -50,7 +50,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     rightScaleLabel,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState(0);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -85,8 +85,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const handleCancel = () => {
     setScore(0);
@@ -179,18 +178,18 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Sentiment.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -32,7 +32,7 @@ export type SentimentProps = {
       like?: ReasonsSettingsSchema;
       dislike?: ReasonsSettingsSchema;
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -43,7 +43,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
@@ -87,8 +87,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const commentLabel =
     score === 1
@@ -214,18 +213,18 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Search/SearchDialog.tsx

@@ -44,6 +44,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     setLoadMore,
     advancedSearch,
     askAi,
+    groupField,
   } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
@@ -51,7 +52,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onFilterChange,
     onFilterReset,
     onFacetReset,
-    onTopFacetsReset,
+    onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const aiSearch = useAiSearch({ filter });
 
@@ -83,10 +84,10 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
   };
 
   const showLoadMore = (groupKey: string, currentCount: number = 0) => {
-    const topFacet = facets.find((facet) => facet.isTop);
+    const groupFacet = facets.find((facet) => facet.field === groupField);
     let needLoadMore = false;
-    if (topFacet) {
-      const groupValue = topFacet.values.find((value) => {
+    if (groupFacet) {
+      const groupValue = groupFacet.values.find((value) => {
         if (typeof value === 'object') {
           return value.value === groupKey;
         } else return false;
@@ -170,14 +171,17 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   facets={facets}
                   searchFilter={filter}
                   onFilterChange={onFilterChange}
-                  onTopFacetsReset={onTopFacetsReset}
+                  onQuickFilterReset={onQuickFilterReset}
+                  groupField={groupField}
                 />
                 {showResults ? (
                   items && Object.keys(items).some((key) => items[key]?.length) ? (
                     Object.keys(items).map((key) =>
                       items[key]?.length ? (
                         <Fragment key={key}>
-                          <SearchGroupTitle>{key}</SearchGroupTitle>
+                          <SearchGroupTitle data-testid="search-group-title">
+                            {key}
+                          </SearchGroupTitle>
                           {items[key]?.map(mapItem)}
                           {showLoadMore(key, items[key]?.length || 0) && (
                             <SearchGroupFooter
@@ -215,6 +219,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     facets={facets}
                     filter={filter}
                     query={query}
+                    quickFilterFields={[groupField]}
                     onFilterChange={onFilterChange}
                     onFilterReset={onFilterReset}
                     onFacetReset={onFacetReset}

package/src/components/Search/SearchFilter.tsx

@@ -13,7 +13,8 @@ export type SearchFilterProps = {
   facets: SearchFacet[];
   filter: SearchFilterItem[];
   query: string;
-  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  quickFilterFields: string[];
+  onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
   onFilterReset: () => void;
   onFacetReset: (field: string) => void;
 };
@@ -23,6 +24,7 @@ export function SearchFilter({
   facets,
   filter,
   query,
+  quickFilterFields,
   onFilterChange,
   onFilterReset,
   onFacetReset,
@@ -50,10 +52,11 @@ export function SearchFilter({
           <SearchFilterField
             key={`${facet.field}-${index}`}
             facet={facet}
-            onFilterChange={onFilterChange}
-            onFacetReset={onFacetReset}
             filter={filter}
             query={query}
+            quickFilterFields={quickFilterFields}
+            onFilterChange={onFilterChange}
+            onFacetReset={onFacetReset}
           />
         ))}
       </SearchFilterFields>

package/src/components/Search/SearchFilterField.tsx

@@ -14,7 +14,8 @@ type SearchFilterFieldProps = {
   facet: SearchFacet;
   filter: SearchFilterItem[];
   query: string;
-  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  quickFilterFields: string[];
+  onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
   onFacetReset: (filed: string) => void;
 };
 
@@ -23,6 +24,7 @@ export function SearchFilterField({
   facet,
   filter,
   query,
+  quickFilterFields,
   onFilterChange,
   onFacetReset,
 }: SearchFilterFieldProps): JSX.Element {
@@ -31,7 +33,7 @@ export function SearchFilterField({
   const selectedValues = filter.find((item) => item.field === facet.field)?.values || [];
 
   const onChange = (value: string | string[]) => {
-    onFilterChange(facet.field, value, facet.isTop);
+    onFilterChange(facet.field, value, facet.field in quickFilterFields);
   };
 
   const onReset = () => {

package/src/components/Search/SearchGroups.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme';
-
+import {
+  type SearchFacet,
+  type SearchFacetCount,
+  type SearchFilterItem,
+} from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 type SearchGroupsProps = {
   facets: SearchFacet[];
   searchFilter: SearchFilterItem[];
-  onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
-  onTopFacetsReset: () => void;
+  groupField: string;
+  onFilterChange: (field: string, value: string[], isQuickFilter?: boolean) => void;
+  onQuickFilterReset: () => void;
 };
 
 export function SearchGroups({
   facets,
   searchFilter,
+  groupField,
   onFilterChange,
-  onTopFacetsReset,
+  onQuickFilterReset,
 }: SearchGroupsProps): JSX.Element {
-  const groupFacets = facets.filter((facet) => facet.isTop);
+  const groupFacets = facets.filter((facet) => facet.field === groupField);
 
   const handleGroupTagClick = (
     value: string,
@@ -36,8 +41,8 @@ export function SearchGroups({
     <SearchGroupsWrapper>
       <GroupTag
         borderless
-        active={!searchFilter.some((item) => item.isTop)}
-        onClick={() => searchFilter.some((item) => item.isTop) && onTopFacetsReset()}
+        active={!searchFilter.some((item) => item.isQuickFilter)}
+        onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
       >
         All
       </GroupTag>

package/src/core/hooks/__mocks__/search/use-search-filter.ts

@@ -5,6 +5,6 @@ export const useSearchFilter = jest.fn(() => {
     onFilterChange: () => {},
     onFilterToggle: () => {},
     onFilterReset: () => {},
-    onTopFacetsReset: () => {},
+    onQuickFilterReset: () => {},
   };
 });

package/src/core/hooks/search/use-search-filter.ts

@@ -12,7 +12,11 @@ export function useSearchFilter(
     setIsFilterOpen(!isFilterOpen);
   }, [isFilterOpen]);
 
-  const onFilterChange = (field: string, value: string | string[] | undefined, isTop?: boolean) => {
+  const onFilterChange = (
+    field: string,
+    value: string | string[] | undefined,
+    isQuickFilter?: boolean,
+  ) => {
     const values = value ? (Array.isArray(value) ? value : [value]) : [];
 
     const _filter = [...filter];
@@ -22,7 +26,7 @@ export function useSearchFilter(
       _filter[fieldIndex].values = values;
     } else {
       if (!values.length) return;
-      _filter.push({ field, values, isTop });
+      _filter.push({ field, values, isQuickFilter });
     }
 
     setFilter(_filter.filter((item) => item.values.length));
@@ -32,9 +36,9 @@ export function useSearchFilter(
     setFilter([]);
   };
 
-  const onTopFacetsReset = () => {
+  const onQuickFilterReset = () => {
     const _filter = [...filter];
-    setFilter(_filter.filter((item) => !item.isTop));
+    setFilter(_filter.filter((item) => !item.isQuickFilter));
   };
 
   const onFacetReset = (field: string) => {
@@ -48,10 +52,10 @@ export function useSearchFilter(
 
   return {
     onFacetReset,
-    onTopFacetsReset,
     onFilterChange,
     onFilterReset,
     onFilterToggle,
+    onQuickFilterReset,
     isFilterOpen,
   };
 }

package/src/core/types/hooks.ts

@@ -66,6 +66,7 @@ export type ThemeHooks = {
     items: Record<string, SearchItemData[] | null>;
     isSearchLoading: boolean;
     facets: SearchFacet[];
+    groupField: string;
     setLoadMore: React.Dispatch<
       React.SetStateAction<
         | {

package/src/core/types/l10n.ts

@@ -129,8 +129,8 @@ export type TranslationKey =
   | 'feedback.sentiment.thumbDown'
   | 'feedback.settings.leftScaleLabel'
   | 'feedback.settings.rightScaleLabel'
-  | 'feedback.settings.anonymousUserEmail.placeholder'
-  | 'feedback.settings.anonymousUserEmail.label'
+  | 'feedback.settings.optionalEmail.placeholder'
+  | 'feedback.settings.optionalEmail.label'
   | 'codeSnippet.report.buttonText'
   | 'codeSnippet.report.tooltipText'
   | 'codeSnippet.report.label'

package/src/core/types/search.ts

@@ -48,7 +48,6 @@ export type SearchFacet = {
   field: string;
   type: SearchFacetType;
   values: string[] | SearchFacetCount[];
-  isTop?: boolean;
   index?: number;
 };
 
@@ -76,5 +75,5 @@ export type SearchFacetType =
 export type SearchFilterItem = {
   field: string;
   values: string[];
-  isTop?: boolean;
+  isQuickFilter?: boolean;
 };