@redocly/theme 0.42.3 → 0.44.0

package/lib/components/TableOfContent/TableOfContent.js

@@ -48,7 +48,7 @@ function TableOfContent(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
             React.createElement(TableOfContentItems, { ref: sidebar },
-                displayedHeadings.length ? (React.createElement(TableOfContentHeader, { "data-translation-key": "theme.toc.header" }, translate('theme.toc.header', toc.header || 'On this page'))) : null,
+                displayedHeadings.length ? (React.createElement(TableOfContentHeader, { "data-translation-key": "toc.header" }, translate('toc.header', toc.header || 'On this page'))) : null,
                 displayedHeadings.map((heading, idx) => {
                     if (!heading) {
                         return null;

package/lib/components/Tag/Tag.d.ts

@@ -16,7 +16,9 @@ export type TagProps = {
     statusDotColor?: string;
     size?: string;
     icon?: React.ReactNode;
-    onClick?: () => void;
+    active?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onClose?: (event: React.MouseEvent) => void;
 };
-export declare function Tag({ children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -17,14 +17,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "onClick", "size", "borderless", "withStatusDot", "statusDotColor"]);
-    return (react_1.default.createElement(TagContainer, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick }, otherProps),
+    var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
+    return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        children));
+        react_1.default.createElement(ContentWrapper, null, children),
+        closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
+                onClose === null || onClose === void 0 ? void 0 : onClose(event);
+            } },
+            react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
+        active && react_1.default.createElement(ActiveIcon, null)));
 }
 exports.Tag = Tag;
-const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
+const ContentWrapper = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-wrap: nowrap;
+
+  padding: var(--tag-content-padding);
+  gap: var(--tag-content-gap);
+`;
+const CloseButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+
+  &:hover {
+    background: var(--tag-close-button-bg-color-hover);
+  }
+`;
+const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     className: (className || '') +
         ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
@@ -32,8 +59,10 @@ const TagContainer = styled_components_1.default.div.attrs(({ className, color,
   align-items: center;
   justify-content: center;
   text-wrap: nowrap;
+  position: relative;
 
   padding: var(--tag-padding);
+  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
   margin: var(--tag-margin);
 
   &:last-child {
@@ -64,4 +93,11 @@ const StatusDot = styled_components_1.default.div `
   border-radius: 50%;
   background-color: ${({ color }) => color};
 `;
+const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+`;
 //# sourceMappingURL=Tag.js.map

package/lib/components/Tag/variables.dark.js

@@ -3,11 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.tagDarkMode = (0, styled_components_1.css) `
-  --tag-operation-color-delete: #fa82a2;
-  --tag-operation-color-get: #68cc97;
-  --tag-operation-color-post: #90b0f0;
-  --tag-operation-color-put: #e0a663;
-  --tag-operation-color-patch: #e0c363;
+  --tag-operation-color-delete: #fa82a2; // @presenter Color
+  --tag-operation-bg-color-delete: #77214C; // @presenter Color
+
+  --tag-operation-color-get: #68cc97; // @presenter Color
+  --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
+
+  --tag-operation-color-post: #90b0f0; // @presenter Color
+  --tag-operation-bg-color-post: #233061; // @presenter Color
+
+  --tag-operation-color-put: #e0a663; // @presenter Color
+  --tag-operation-bg-color-put: #612729; // @presenter Color
+
+  --tag-operation-color-patch: #e0c363; // @presenter Color
+  --tag-operation-bg-color-patch: #5C3721; // @presenter Color
+
+  --tag-operation-color-head: #e6e1fe; // @presenter Color
+  --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
   .tag-grey,
   .tag-draft,

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/UserMenu/LoginButton.js

@@ -12,7 +12,7 @@ function LoginButton({ href, className }) {
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     return (react_1.default.createElement("div", { "data-component-name": "UserMenu/LoginButton", className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.userMenu.login", to: href, onClick: () => telemetry.send('login_button_clicked', {}), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('theme.userMenu.login', 'Login'))));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => telemetry.send('login_button_clicked', {}), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
 }
 exports.LoginButton = LoginButton;
 //# sourceMappingURL=LoginButton.js.map

package/lib/components/UserMenu/LogoutMenuItem.js

@@ -17,7 +17,7 @@ function LogoutMenuItem({ iconOnly, className }) {
         telemetry.send('logout_menu_item_clicked', {});
         handleLogout();
     };
-    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { className: className, dangerous: true, "data-component-name": "UserMenu/LogoutMenuItem", onAction: handleClick, "data-translation-key": "theme.userMenu.logout", prefix: react_1.default.createElement(LogoutIcon_1.LogoutIcon, null), style: { width: iconOnly ? 'fit-content' : '100%' } }, iconOnly ? null : translate('theme.userMenu.logout', 'Log out')));
+    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { className: className, dangerous: true, "data-component-name": "UserMenu/LogoutMenuItem", onAction: handleClick, "data-translation-key": "userMenu.logout", prefix: react_1.default.createElement(LogoutIcon_1.LogoutIcon, null), style: { width: iconOnly ? 'fit-content' : '100%' } }, iconOnly ? null : translate('userMenu.logout', 'Log out')));
 }
 exports.LogoutMenuItem = LogoutMenuItem;
 //# sourceMappingURL=LogoutMenuItem.js.map

package/lib/components/UserMenu/UserMenu.js

@@ -32,7 +32,7 @@ function UserMenu({ className }) {
     }
     const devOnboardingMenuItem = hasDeveloperOnboarding
         ? [
-            react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: "my-apps", to: "/apps", "data-translation-key": "theme.userMenu.devOnboardingLabel", prefix: react_1.default.createElement(GridIcon_1.GridIcon, null) }, translate('theme.userMenu.devOnboardingLabel')),
+            react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: "my-apps", to: "/apps", "data-translation-key": "userMenu.devOnboardingLabel", prefix: react_1.default.createElement(GridIcon_1.GridIcon, null) }, translate('userMenu.devOnboardingLabel')),
         ]
         : [];
     const menuItems = (userMenu === null || userMenu === void 0 ? void 0 : userMenu['menu']) || [];

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(VersionPickerLabel, { "data-translation-key": "versionPicker.label" }, translate('versionPicker.label', 'Version:')),
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('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/feedback/use-report-dialog.js

@@ -23,13 +23,13 @@ function useReportDialog() {
     };
     const reportButtonProps = {
         onClick: showReportDialog,
-        buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
-        tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+        buttonText: buttonText || translate('codeSnippet.report.buttonText', 'Report'),
+        tooltip: tooltipText || translate('codeSnippet.report.tooltipText', 'Report a problem'),
         hide: (report === null || report === void 0 ? void 0 : report.hide) === true,
     };
     const reportDialogProps = {
         settings: {
-            label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+            label: label || translate('codeSnippet.report.label', 'What is wrong with this code?'),
         },
         onSubmit: hideReportDialog,
         onCancel: closeReportDialog,

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/menu/use-mobile-menu-items.js

@@ -55,7 +55,7 @@ const useMobileMenuItems = (menuType) => {
         if (productMenuItems.length) {
             menuItems.push({
                 type: 'separator',
-                label: translate('theme.mobileMenu.products', 'Products'),
+                label: translate('mobileMenu.products', 'Products'),
             });
             menuItems.push(...productMenuItems);
         }

package/lib/core/hooks/menu/use-mobile-menu-levels.js

@@ -20,7 +20,7 @@ const useMobileMenuLevels = () => {
     const menuLevels = (0, react_1.useMemo)(() => {
         const menuLevels = [
             {
-                label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
+                label: translate('mobileMenu.mainMenu', 'Main Menu'),
                 type: constants_1.MobileMenuType.MAIN_MENU,
             },
         ];
@@ -32,7 +32,7 @@ const useMobileMenuLevels = () => {
         }
         if (sidebarItems.length || activeVersion) {
             menuLevels.push({
-                label: translate('theme.mobileMenu.previous', 'Previous'),
+                label: translate('mobileMenu.previous', 'Previous'),
                 type: constants_1.MobileMenuType.PAGE,
             });
         }

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;
+};