@redocly/theme 0.42.2 → 0.43.0

package/lib/components/Tag/variables.js

@@ -9,7 +9,7 @@ exports.tag = (0, styled_components_1.css) `
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
@@ -22,8 +22,17 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag spacing
     */
 
-  --tag-padding: 1px 8px; //@presenter Spacing
-  --tag-large-padding: 4px 16px; //@presenter Spacing
+  --tag-padding-vertical: 1px; //@presenter Spacing
+  --tag-padding-horizontal: 8px; //@presenter Spacing
+  --tag-padding: 0 var(--tag-padding-horizontal); //@presenter Spacing
+  --tag-content-padding: var(--tag-padding-vertical) 0; //@presenter Spacing
+  --tag-content-gap: 4px; //@presenter Spacing
+
+  --tag-large-padding-vertical: 4px; //@presenter Spacing
+  --tag-large-padding-horizontal: 16px; //@presenter Spacing
+  --tag-large-padding: 0 var(--tag-large-padding-horizontal); //@presenter Spacing
+  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
+  
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -33,6 +42,7 @@ exports.tag = (0, styled_components_1.css) `
 
   .tag-size-large {
     --tag-padding: var(--tag-large-padding);
+    --tag-content-padding: var(--tag-large-content-padding);
     --tag-font-size: var(--font-size-base);
   }
 
@@ -67,6 +77,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--text-color-primary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   .tag-green,
@@ -75,6 +86,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
   }
 
   .tag-red,
@@ -83,6 +95,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
     --tag-border-color: var(--color-error-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
   }
 
   .tag-gold,
@@ -91,6 +104,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
   }
 
   .tag-blue,
@@ -98,6 +112,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
   }
 
   .tag-purple,
@@ -105,26 +120,24 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
   }
 
   .tag-cyan,
-  .tag-option {
+  .tag-option,
+  .tag-geekblue,
+  .tag-link {
     --tag-color: var(--color-turquoise-7); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
     --tag-border-color: var(--color-turquoise-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
   }
 
   .tag-yellow {
     --tag-color: var(--color-carrot-7); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
     --tag-border-color: var(--color-carrot-7); // @presenter Color
-  }
-
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-turquoise-7); // @presenter Color
-    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
-    --tag-border-color: var(--color-turquoise-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
   }
 
   .tag-magenta,
@@ -132,18 +145,21 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
     --tag-border-color: var(--color-magenta-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
   }
 
   .tag-lime {
     --tag-color: var(--color-green-7); // @presenter Color
     --tag-bg-color: none; // @presenter Color
     --tag-border-color: var(--color-green-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
   }
 
   .tag-product {
     --tag-color: var(--color-warm-grey-7); // @presenter Color
     --tag-bg-color: transparent; // @presenter Color
     --tag-border-color: var(--color-warm-grey-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   /**
@@ -158,12 +174,28 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Operation tag colors
     */
 
-  --tag-operation-color-delete: #E70B46;
-  --tag-operation-color-get: #25B869;
-  --tag-operation-color-post: #1E65F5;
-  --tag-operation-color-put: #F5901D;
-  --tag-operation-color-patch: #F5C31D;
-  --tag-operation-color-deprecated: var(--text-color-disabled);
+  --tag-operation-color-delete: #e70b46; // @presenter Color
+  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
+  
+  --tag-operation-color-get: #25b869; // @presenter Color
+  --tag-operation-bg-color-get: #e5faef; // @presenter Color
+  
+  --tag-operation-color-post: #1e65f5; // @presenter Color
+  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
+  
+  --tag-operation-color-put: #f5901d; // @presenter Color
+  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
+  
+  --tag-operation-color-patch: #f5c31d; // @presenter Color
+  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
+
+  --tag-operation-color-head: #5b4ccc; // @presenter Color
+  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #ededf2; // @presenter Color
+  
+  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
 
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color

package/lib/components/VersionPicker/VersionPicker.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { Version } from '@redocly/config';
-import { Select, type SelectProps } from '../../components/Select/Select';
-export interface VersionPickerProps extends SelectProps {
-}
+import type { SelectProps } from '../../core/types/select';
+import { Select } from '../../components/Select/Select';
 export declare function VersionPicker(props: {
     versions?: Version[];
     onChange: (v: Version) => void;

package/lib/components/VersionPicker/VersionPicker.js

@@ -31,6 +31,7 @@ const React = __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 SelectInput_1 = require("../../components/Select/SelectInput");
 function VersionPicker(props) {
     var _a;
     const themeConfig = (0, hooks_1.useThemeConfig)();
@@ -38,22 +39,24 @@ function VersionPicker(props) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { versions = [], onChange } = props;
-    const options = versions.map((version) => {
-        return {
-            element: version.label || version.version,
-            value: version,
-            active: version.active,
-        };
-    });
+    const options = versions.map(({ label, version, active }) => ({
+        element: label || version,
+        value: version,
+        active: active,
+    }));
+    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
     if (versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.hide) {
         return null;
     }
-    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
+    const handleOnChange = (value) => {
+        const selectedVersion = versions.find((v) => v.version === value);
+        onChange(selectedVersion);
+    };
     if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
         return null;
     return (React.createElement(VersionsPickerWrapper, { "data-component-name": "VersionPicker/VersionPicker" },
         React.createElement(VersionPickerLabel, { "data-translation-key": "theme.versionPicker.label" }, translate('theme.versionPicker.label', 'Version:')),
-        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: handleOnChange })));
 }
 exports.VersionPicker = VersionPicker;
 const VersionPickerLabel = styled_components_1.default.label `
@@ -72,32 +75,12 @@ exports.VersionPickerSelect = (0, styled_components_1.default)(Select_1.Select)
   line-height: var(--version-picker-line-height);
   color: var(--version-picker-text-color);
 
-  ${Select_1.SelectInput} {
+  ${SelectInput_1.SelectInputWrapper} {
     border: var(--version-picker-input-border);
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
   }
-
-  ${Select_1.SelectList} {
-    right: 0;
-    width: 100%;
-    min-width: var(--version-picker-list-min-width);
-    max-width: var(--version-picker-list-max-width);
-    padding: var(--version-picker-list-padding);
-    background-color: var(--version-picker-list-bg-color);
-    border-radius: var(--version-picker-list-border-radius);
-    box-shadow: var(--version-picker-list-box-shadow);
-  }
-
-  ${Select_1.SelectListItem} {
-    border-radius: var(--version-picker-list-item-border-radius);
-
-    & > * {
-      padding: var(--version-picker-list-item-vertical-padding)
-        var(--version-picker-list-item-horizontal-padding);
-    }
-  }
 `;
 const VersionsPickerWrapper = styled_components_1.default.div `
   display: flex;

package/lib/core/hooks/__mocks__/index.d.ts

@@ -4,6 +4,7 @@ export * from '../../../core/hooks/__mocks__/use-mobile-menu';
 export * from '../../../core/hooks/__mocks__/use-controlled-state';
 export * from '../../../core/hooks/__mocks__/search/use-recent-searches';
 export * from '../../../core/hooks/__mocks__/search/use-suggested-pages';
+export * from '../../../core/hooks/__mocks__/search/use-search-filter';
 export * from '../../../core/hooks/menu/__mocks__/use-mobile-menu-items';
 export * from '../../../core/hooks/menu/use-collapse';
 export * from '../../../core/hooks/use-active-heading';
@@ -20,5 +21,5 @@ export * from '../../../core/hooks/menu/use-menu-item-expanded';
 export * from '../../../core/hooks/menu/use-mobile-menu-levels';
 export * from '../../../core/hooks/feedback/use-report-dialog';
 export * from '../../../core/hooks/use-product-picker';
-export * from '../../../core/hooks/use-search';
+export * from '../../../core/hooks/search/use-search-dialog';
 export * from '../../../core/hooks/use-language-picker';

package/lib/core/hooks/__mocks__/index.js

@@ -20,6 +20,7 @@ __exportStar(require("../../../core/hooks/__mocks__/use-mobile-menu"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-controlled-state"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/search/use-recent-searches"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/search/use-suggested-pages"), exports);
+__exportStar(require("../../../core/hooks/__mocks__/search/use-search-filter"), exports);
 __exportStar(require("../../../core/hooks/menu/__mocks__/use-mobile-menu-items"), exports);
 __exportStar(require("../../../core/hooks/menu/use-collapse"), exports);
 __exportStar(require("../../../core/hooks/use-active-heading"), exports);
@@ -36,6 +37,6 @@ __exportStar(require("../../../core/hooks/menu/use-menu-item-expanded"), exports
 __exportStar(require("../../../core/hooks/menu/use-mobile-menu-levels"), exports);
 __exportStar(require("../../../core/hooks/feedback/use-report-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-product-picker"), exports);
-__exportStar(require("../../../core/hooks/use-search"), exports);
+__exportStar(require("../../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-language-picker"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,9 @@
+/// <reference types="jest" />
+export declare const useSearchFilter: jest.Mock<{
+    isFilterOpen: boolean;
+    onFacetReset: () => void;
+    onFilterChange: () => void;
+    onFilterToggle: () => void;
+    onFilterReset: () => void;
+    onTopFacetsReset: () => void;
+}, [], any>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = void 0;
+exports.useSearchFilter = jest.fn(() => {
+    return {
+        isFilterOpen: false,
+        onFacetReset: () => { },
+        onFilterChange: () => { },
+        onFilterToggle: () => { },
+        onFilterReset: () => { },
+        onTopFacetsReset: () => { },
+    };
+});
+//# sourceMappingURL=use-search-filter.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -30,12 +30,17 @@ export declare const useThemeHooks: jest.Mock<{
     }, [], any>;
     useCurrentProduct: jest.Mock<any, any, any>;
     useProducts: jest.Mock<never[], [], any>;
-    useFuseSearch: jest.Mock<{
+    useSearch: jest.Mock<{
         query: jest.Mock<any, any, any>;
         setQuery: jest.Mock<any, any, any>;
         items: never[];
         isLoading: boolean;
     }, [], any>;
+    useFacetQuery: jest.Mock<{
+        searchFacet: null;
+        setSearchFacet: jest.Mock<any, any, any>;
+        setSearchFacetQuery: jest.Mock<any, any, any>;
+    }, [], any>;
     useUserMenu: jest.Mock<{
         userData: {
             isAuthenticated: boolean;

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -37,12 +37,17 @@ exports.useThemeHooks = jest.fn(() => ({
     })),
     useCurrentProduct: jest.fn(),
     useProducts: jest.fn(() => []),
-    useFuseSearch: jest.fn(() => ({
+    useSearch: jest.fn(() => ({
         query: jest.fn().mockReturnValue(''),
         setQuery: jest.fn(),
         items: [],
         isLoading: false,
     })),
+    useFacetQuery: jest.fn(() => ({
+        searchFacet: null,
+        setSearchFacet: jest.fn(),
+        setSearchFacetQuery: jest.fn(),
+    })),
     useUserMenu: jest.fn(() => ({
         userData: {
             isAuthenticated: true,

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

@@ -24,6 +24,7 @@ export * from '../../core/hooks/use-tabs';
 export * from '../../core/hooks/use-focus-trap';
 export * from '../../core/hooks/use-language-picker';
 export * from '../../core/hooks/use-product-picker';
-export * from '../../core/hooks/use-search';
+export * from '../../core/hooks/search/use-search-dialog';
+export * from '../../core/hooks/search/use-search-filter';
 export * from '../../core/hooks/use-controlled-state';
 export * from '../../core/hooks/use-codeblock-tabs-controls';

package/lib/core/hooks/index.js

@@ -40,7 +40,8 @@ __exportStar(require("../../core/hooks/use-tabs"), exports);
 __exportStar(require("../../core/hooks/use-focus-trap"), exports);
 __exportStar(require("../../core/hooks/use-language-picker"), exports);
 __exportStar(require("../../core/hooks/use-product-picker"), exports);
-__exportStar(require("../../core/hooks/use-search"), exports);
+__exportStar(require("../../core/hooks/search/use-search-dialog"), exports);
+__exportStar(require("../../core/hooks/search/use-search-filter"), exports);
 __exportStar(require("../../core/hooks/use-controlled-state"), exports);
 __exportStar(require("../../core/hooks/use-codeblock-tabs-controls"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-recent-searches.js

@@ -17,6 +17,8 @@ function updateRecentSearches(value, isAdd) {
     if (!(0, utils_1.isBrowser)())
         return [];
     const recentSearches = getRecentSearches();
+    if (value === '')
+        return recentSearches;
     const valueIndex = recentSearches.indexOf(value);
     if (valueIndex !== -1)
         recentSearches.splice(valueIndex, 1);

package/lib/core/hooks/{use-search.d.ts → search/use-search-dialog.d.ts}

@@ -1,4 +1,4 @@
-export declare function useSearch(): {
+export declare function useSearchDialog(): {
     isOpen: boolean;
     onOpen: () => void;
     onClose: () => void;

package/lib/core/hooks/{use-search.js → search/use-search-dialog.js}

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearch = void 0;
+exports.useSearchDialog = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
-const hooks_1 = require("../../core/hooks");
-function useSearch() {
+const hooks_1 = require("../../../core/hooks");
+function useSearchDialog() {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
@@ -40,5 +40,5 @@ function useSearch() {
     (0, react_1.useEffect)(onClose, [location]);
     return { isOpen, onOpen, onClose };
 }
-exports.useSearch = useSearch;
-//# sourceMappingURL=use-search.js.map
+exports.useSearchDialog = useSearchDialog;
+//# sourceMappingURL=use-search-dialog.js.map

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

@@ -0,0 +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;
+    onFilterReset: () => void;
+    onFilterToggle: () => void;
+    isFilterOpen: boolean;
+};

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = void 0;
+const react_1 = require("react");
+function useSearchFilter(filter, setFilter) {
+    const [isFilterOpen, setIsFilterOpen] = (0, react_1.useState)(false);
+    const onFilterToggle = (0, react_1.useCallback)(() => {
+        setIsFilterOpen(!isFilterOpen);
+    }, [isFilterOpen]);
+    const onFilterChange = (field, value, isTop) => {
+        const values = value ? (Array.isArray(value) ? value : [value]) : [];
+        const _filter = [...filter];
+        const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+        if (fieldIndex > -1) {
+            // filter field already exists
+            _filter[fieldIndex].values = values;
+        }
+        else {
+            if (!values.length)
+                return;
+            _filter.push({ field, values, isTop });
+        }
+        setFilter(_filter.filter((item) => item.values.length));
+    };
+    const onFilterReset = () => {
+        setFilter([]);
+    };
+    const onTopFacetsReset = () => {
+        const _filter = [...filter];
+        setFilter(_filter.filter((item) => !item.isTop));
+    };
+    const onFacetReset = (field) => {
+        const _filter = [...filter];
+        const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+        if (fieldIndex !== -1) {
+            _filter[fieldIndex].values = [];
+        }
+        setFilter(_filter.filter((item) => item.values.length));
+    };
+    return {
+        onFacetReset,
+        onTopFacetsReset,
+        onFilterChange,
+        onFilterReset,
+        onFilterToggle,
+        isFilterOpen,
+    };
+}
+exports.useSearchFilter = useSearchFilter;
+//# sourceMappingURL=use-search-filter.js.map

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

@@ -2,7 +2,7 @@ import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/confi
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UserMenuData, FilteredCatalog, ItemState, SearchDocument, SubmitFeedbackParams, TFunction, BreadcrumbItem, DrilldownMenuItemDetails } from '../../core/types';
+import type { UserMenuData, FilteredCatalog, ItemState, SearchItemData, SubmitFeedbackParams, TFunction, BreadcrumbItem, DrilldownMenuItemDetails, SearchFacet, SearchFilterItem, SearchFacetQuery } from '../../core/types';
 export type ThemeHooks = {
     useTranslate: () => {
         translate: TFunction;
@@ -45,11 +45,24 @@ export type ThemeHooks = {
         location: Location;
     };
     useBreadcrumbs: () => BreadcrumbItem[];
-    useFuseSearch: (product?: string) => {
+    useSearch: (product?: string) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
-        items: SearchDocument[] | null;
-        isLoading: boolean;
+        filter: SearchFilterItem[];
+        setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>;
+        items: Record<string, SearchItemData[] | null>;
+        isSearchLoading: boolean;
+        facets: SearchFacet[];
+        setLoadMore: React.Dispatch<React.SetStateAction<{
+            groupKey: string;
+            offset: number;
+        } | undefined>>;
+        advancedSearch?: boolean;
+    };
+    useFacetQuery: (field: string) => {
+        searchFacet: SearchFacet | null;
+        setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
+        setSearchFacetQuery: React.Dispatch<React.SetStateAction<SearchFacetQuery | null>>;
     };
     useSidebarItems: (activeVersion?: Version | null) => {
         currentItems: ItemState[];

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

@@ -6,7 +6,7 @@ export * from '../../core/types/hooks';
 export * from '../../core/types/markdown';
 export * from '../../core/types/navbar';
 export * from '../../core/types/search';
-export * from '../../core/types/select-option';
+export * from '../../core/types/select';
 export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';

package/lib/core/types/index.js

@@ -22,7 +22,7 @@ __exportStar(require("../../core/types/hooks"), exports);
 __exportStar(require("../../core/types/markdown"), exports);
 __exportStar(require("../../core/types/navbar"), exports);
 __exportStar(require("../../core/types/search"), exports);
-__exportStar(require("../../core/types/select-option"), exports);
+__exportStar(require("../../core/types/select"), exports);
 __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);

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

@@ -1,6 +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' | 'theme.search.noResults' | 'theme.search.keys.navigate' | 'theme.search.keys.select' | 'theme.search.keys.exit' | 'theme.search.label' | 'theme.search.cancel' | 'theme.search.recent' | 'theme.search.navbar.label' | 'theme.search.suggested' | 'theme.toc.header' | 'theme.footer.copyrightText' | 'theme.page.homeButton' | 'theme.page.forbidden.title' | 'theme.page.notFound.title' | 'theme.page.notFound.description' | 'theme.page.lastUpdated.timeago' | 'theme.page.lastUpdated.on' | 'theme.catalog.filters.placeholder' | 'theme.catalog.filters.title' | 'theme.catalog.filters.clearAll' | 'theme.catalog.filters.select.addFilter' | 'theme.catalog.filters.select.all' | 'theme.catalog.filters.done' | 'theme.sidebar.menu.backLabel' | 'theme.sidebar.actions.show' | 'theme.sidebar.actions.hide' | 'theme.sidebar.actions.changeLayout' | 'theme.versionPicker.label' | 'theme.versionPicker.unversioned' | 'theme.codeSnippet.copy.buttonText' | 'theme.codeSnippet.copy.tooltipText' | 'theme.codeSnippet.copy.toasterText' | 'theme.markdown.editPage.text' | 'theme.feedback.settings.comment.submitText' | 'theme.feedback.settings.comment.label' | 'theme.feedback.settings.comment.send' | 'theme.feedback.settings.comment.cancel' | 'theme.feedback.settings.comment.satisfiedLabel' | 'theme.feedback.settings.comment.neutralLabel' | 'theme.feedback.settings.comment.dissatisfiedLabel' | 'theme.feedback.settings.submitText' | 'theme.feedback.settings.label' | 'theme.feedback.settings.reasons.label' | 'theme.feedback.settings.reasons.send' | 'theme.feedback.settings.comment.likeLabel' | 'theme.feedback.settings.comment.dislikeLabel' | 'theme.feedback.sentiment.thumbUp' | 'theme.feedback.sentiment.thumbDown' | 'theme.feedback.settings.leftScaleLabel' | 'theme.feedback.settings.rightScaleLabel' | 'theme.codeSnippet.report.buttonText' | 'theme.codeSnippet.report.tooltipText' | 'theme.codeSnippet.report.label' | 'theme.userMenu.login' | 'theme.userMenu.logout' | 'theme.userMenu.devOnboardingLabel' | 'theme.mobileMenu.mainMenu' | 'theme.mobileMenu.previous' | 'theme.mobileMenu.products' | 'theme.page.nextButton' | 'theme.page.previousButton';
-export type GraphQLTranslationKey = 'graphql.sidebar.group.queries' | 'graphql.sidebar.group.mutations' | 'graphql.sidebar.group.subscriptions' | 'graphql.sidebar.group.directives' | 'graphql.sidebar.group.objects' | 'graphql.sidebar.group.interfaces' | 'graphql.sidebar.group.unions' | 'graphql.sidebar.group.enums' | 'graphql.sidebar.group.inputs' | 'graphql.sidebar.group.scalars' | 'graphql.sidebar.group.scalars' | 'graphql.content.arguments.label' | 'graphql.content.arguments.show' | 'graphql.content.arguments.hide' | 'graphql.content.returnTypes.label' | 'graphql.content.returnTypes.show' | 'graphql.content.returnTypes.hide' | 'graphql.content.defaultValue' | 'graphql.content.deprecationReason' | 'graphql.content.implementedInterfaces' | 'graphql.content.argumentsHere' | 'graphql.content.nonNull' | 'graphql.content.required' | 'graphql.content.deprecated' | 'graphql.rightSection.variables' | 'graphql.rightSection.querySample' | 'graphql.rightSection.mutationSample' | 'graphql.rightSection.subscriptionSample' | 'graphql.rightSection.responseSample' | 'graphql.rightSection.locations' | 'graphql.rightSection.sample' | 'graphql.rightSection.referenced' | 'graphql.navigation.next' | 'graphql.navigation.previous';
+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' | 'theme.search.loading' | 'theme.search.noResults.title' | 'theme.search.noResults.description' | 'theme.search.keys.navigate' | 'theme.search.keys.select' | 'theme.search.keys.exit' | 'theme.search.label' | 'theme.search.cancel' | 'theme.search.recent' | 'theme.search.navbar.label' | 'theme.search.suggested' | 'theme.search.showMore' | 'theme.search.filter.title' | 'theme.search.filter.reset' | 'theme.search.filter.field.reset' | 'theme.toc.header' | 'theme.footer.copyrightText' | 'theme.page.homeButton' | 'theme.page.forbidden.title' | 'theme.page.notFound.title' | 'theme.page.notFound.description' | 'theme.page.lastUpdated.timeago' | 'theme.page.lastUpdated.on' | 'theme.catalog.filters.placeholder' | 'theme.catalog.filters.title' | 'theme.catalog.filters.clearAll' | 'theme.catalog.filters.select.addFilter' | 'theme.catalog.filters.select.all' | 'theme.catalog.filters.done' | 'theme.sidebar.menu.backLabel' | 'theme.sidebar.actions.show' | 'theme.sidebar.actions.hide' | 'theme.sidebar.actions.changeLayout' | 'theme.versionPicker.label' | 'theme.versionPicker.unversioned' | 'theme.codeSnippet.copy.buttonText' | 'theme.codeSnippet.copy.tooltipText' | 'theme.codeSnippet.copy.toasterText' | 'theme.markdown.editPage.text' | 'theme.feedback.settings.comment.submitText' | 'theme.feedback.settings.comment.label' | 'theme.feedback.settings.comment.send' | 'theme.feedback.settings.comment.cancel' | 'theme.feedback.settings.comment.satisfiedLabel' | 'theme.feedback.settings.comment.neutralLabel' | 'theme.feedback.settings.comment.dissatisfiedLabel' | 'theme.feedback.settings.submitText' | 'theme.feedback.settings.label' | 'theme.feedback.settings.reasons.label' | 'theme.feedback.settings.reasons.send' | 'theme.feedback.settings.comment.likeLabel' | 'theme.feedback.settings.comment.dislikeLabel' | 'theme.feedback.sentiment.thumbUp' | 'theme.feedback.sentiment.thumbDown' | 'theme.feedback.settings.leftScaleLabel' | 'theme.feedback.settings.rightScaleLabel' | 'theme.codeSnippet.report.buttonText' | 'theme.codeSnippet.report.tooltipText' | 'theme.codeSnippet.report.label' | 'theme.userMenu.login' | 'theme.userMenu.logout' | 'theme.userMenu.devOnboardingLabel' | 'theme.mobileMenu.mainMenu' | 'theme.mobileMenu.previous' | 'theme.mobileMenu.products' | 'theme.page.nextButton' | 'theme.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.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.pdfFileSample' | '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';
 export type Locale = {
     code: string;
     name: string;

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

@@ -12,9 +12,9 @@ export type SearchDocument = {
     title: string | string[];
     text: string | string[];
     path?: string[];
-    httpVerb?: string;
+    httpMethod?: string;
+    httpPath?: string | string[];
     deprecated?: boolean;
-    pathName?: string | string[];
     parameters?: OperationParameter[];
     metadata?: Record<string, any>;
     version?: string;
@@ -29,4 +29,44 @@ export type SearchDocument = {
         fsPath?: string;
     };
     badges?: ItemBadge[];
+    facets?: Record<string, string>;
+    tags?: string[];
+    rbacTeams?: string[];
+};
+export type ParameterHighlight = {
+    name: string;
+    description: string;
+    place: string;
+    path: string[];
+};
+export type SearchItemData = {
+    document: SearchDocument;
+    highlight: Record<string, string> & {
+        parameters?: ParameterHighlight[];
+        path?: string[];
+    };
+};
+export type SearchFacet = {
+    name: string;
+    field: string;
+    type: SearchFacetType;
+    values: string[] | SearchFacetCount[];
+    isTop?: boolean;
+    index?: number;
+};
+export type SearchFacetCount = {
+    value: string;
+    count: number;
+    isCounterVisible?: boolean;
+};
+export type SearchFacetQuery = {
+    query: string;
+    filter: SearchFilterItem[];
+    facetQuery: string;
+};
+export type SearchFacetType = 'input' | 'multi-select' | 'select' | 'switch' | 'radio' | 'tags' | 'checkbox';
+export type SearchFilterItem = {
+    field: string;
+    values: string[];
+    isTop?: boolean;
 };