@redocly/theme 0.13.1 → 0.14.0

package/lib/components/Navbar/MobileNavbarMenu.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import type { ResolvedConfigLinks } from '../../types/portal';
-export declare function MobileNavbarMenu({ menuItems, closeMenu, search, }: {
+export declare function MobileNavbarMenu({ menuItems, closeMenu, }: {
     menuItems: ResolvedConfigLinks;
-    search: React.ReactNode | undefined;
     closeMenu: () => void;
 }): JSX.Element | null;

package/lib/components/Navbar/MobileNavbarMenu.js

@@ -10,16 +10,14 @@ const NavbarItem_1 = require("../../components/Navbar/NavbarItem");
 const MobileNavbarItem_1 = require("../../components/Navbar/MobileNavbarItem");
 const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
 const utils_1 = require("../../utils");
-function MobileNavbarMenu({ menuItems, closeMenu, search, }) {
+function MobileNavbarMenu({ menuItems, closeMenu, }) {
     if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavbarItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
-        react_1.default.createElement(NavbarItemsContainer, null,
-            react_1.default.createElement(MobileSearchWrapper, null, search || null),
-            menuItems.map((navItem, index) => {
-                return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
-            })),
+        react_1.default.createElement(NavbarItemsContainer, null, menuItems.map((navItem, index) => {
+            return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+        })),
         react_1.default.createElement(NavbarItemsClosableArea, { onClick: closeMenu })));
 }
 exports.MobileNavbarMenu = MobileNavbarMenu;
@@ -91,14 +89,4 @@ const NavbarItemsContainer = styled_components_1.default.ul `
     position: relative;
   }
 `;
-const MobileSearchWrapper = styled_components_1.default.div `
-  padding: var(--navbar-item-padding-horizontal);
-  > div {
-    display: block;
-    width: 100%;
-  }
-  input {
-    width: 100%;
-  }
-`;
 //# sourceMappingURL=MobileNavbarMenu.js.map

package/lib/components/Navbar/Navbar.js

@@ -82,7 +82,7 @@ function NavbarPresentational(props) {
     const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, changeLanguage, } = props;
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         menuItemsExist && react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
-        isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu, search: hideSearch ? null : react_1.default.createElement(Search_1.Search, null) })),
+        isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu })),
         react_1.default.createElement(exports.NavbarRow, null,
             react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function CancelSearch({ onClick }: {
+    onClick: () => void;
+}): JSX.Element;

package/lib/components/Search/CancelSearch.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelSearch = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
+function CancelSearch({ onClick }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        cancel: 'theme.search.cancel',
+    };
+    return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick },
+        React.createElement(Button, { "data-translation-keys": translationKeys.cancel }, translate(translationKeys.cancel, 'Cancel'))));
+}
+exports.CancelSearch = CancelSearch;
+const Button = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  padding: 4px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 22px;
+  height: 32px;
+`;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  padding: 12px 16px 16px;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;
+//# sourceMappingURL=CancelSearch.js.map

package/lib/components/Search/ClearIcon.js

@@ -11,7 +11,6 @@ const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xm
 exports.ClearIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'Search/ClearIcon',
 })) `
-  position: absolute;
   cursor: pointer;
   width: 0.5em;
   height: 0.5em;

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

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+export declare const ClockBackwardsIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {
+    'data-component-name': string;
+    className: string | undefined;
+}, "className" | "data-component-name">;

package/lib/components/Search/ClockBackwardsIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClockBackwardsIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M10.295 11L7.5 8.205V3.5H8.5V7.79L11 10.295L10.295 11Z" }),
+    react_1.default.createElement("path", { d: "M8 1C7.06748 1.00013 6.14446 1.18739 5.28562 1.55068C4.42677 1.91397 3.64955 2.44591 3 3.115V1H2V5H6V4H3.54C4.47801 2.95765 5.75149 2.27676 7.13926 2.0756C8.52703 1.87444 9.94142 2.16571 11.1368 2.89882C12.3322 3.63193 13.233 4.76057 13.6829 6.08873C14.1327 7.41689 14.1032 8.86066 13.5993 10.1693C13.0955 11.4779 12.1492 12.5688 10.9249 13.2523C9.7005 13.9359 8.27537 14.1691 6.897 13.9113C5.51862 13.6535 4.27407 12.9211 3.3795 11.8412C2.48492 10.7614 1.99683 9.40227 2 8H1C1 9.38447 1.41054 10.7378 2.17971 11.889C2.94888 13.0401 4.04213 13.9373 5.32122 14.4672C6.6003 14.997 8.00776 15.1356 9.36563 14.8655C10.7235 14.5954 11.9708 13.9287 12.9497 12.9497C13.9287 11.9708 14.5954 10.7235 14.8655 9.36563C15.1356 8.00776 14.997 6.6003 14.4672 5.32122C13.9373 4.04213 13.0401 2.94888 11.889 2.17971C10.7378 1.41054 9.38447 1 8 1Z" })));
+exports.ClockBackwardsIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
+    'data-component-name': 'Search/RecentlyViewedIcon',
+    className,
+})) `
+  width: 0.5em;
+  height: 0.5em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 0.625em;
+    height: 0.625em;
+  }
+`;
+//# sourceMappingURL=ClockBackwardsIcon.js.map

package/lib/components/Search/Input.js

@@ -17,14 +17,10 @@ exports.FormInput = styled_components_1.default.input.attrs(() => ({
   font-size: var(--search-input-font-size);
   font-family: var(--search-input-font-family);
   line-height: var(--search-input-line-height);
+  width: 100%;
 
   ::placeholder {
     color: var(--search-input-placeholder-color);
   }
-
-  &:hover {
-    background-color: var(--search-input-hover-background-color);
-    border: var(--search-input-hover-border);
-  }
 `;
 //# sourceMappingURL=Input.js.map

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface InputWrapperProps {
+    placeholder?: string;
+    value: string;
+    change(value: string): void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    isLoading: boolean;
+}
+export declare function InputWrapper({ placeholder, value, change, isLoading, }: InputWrapperProps): JSX.Element;
+export {};

package/lib/components/Search/InputWrapper.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Input_1 = require("../../components/Search/Input");
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+const SpinnerIcon_1 = require("../../icons/SpinnerIcon");
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function InputWrapper({ placeholder, value, change, isLoading, }) {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const refInput = (0, react_1.useRef)(null);
+    const onFocus = () => setIsFocused(true);
+    const close = () => {
+        setIsFocused(false);
+    };
+    const reset = () => {
+        change('');
+        close();
+    };
+    const stopPropagation = (event) => event.stopPropagation();
+    const onChange = (event) => {
+        setIsFocused(true);
+        change(event.target.value);
+    };
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/InputContainer" },
+        isFocused && isLoading ? react_1.default.createElement(SpinnerIcon, null) : react_1.default.createElement(SearchIcon, null),
+        react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onClick: stopPropagation, ref: refInput }),
+        !!value && react_1.default.createElement(ClearIcon, { onClick: reset })));
+}
+exports.InputWrapper = InputWrapper;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  height: 56px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: var(--search-input-background-color);
+  border-radius: 0;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    border-radius: 8px 8px 0 0;
+  }
+`;
+const SearchIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
+  width: 20px;
+  height: 20px;
+  fill: var(--search-input-placeholder-color);
+`;
+const SpinnerIcon = (0, styled_components_1.default)(SpinnerIcon_1.SpinnerIcon) `
+  width: 20px;
+  height: 20px;
+  fill: var(--search-input-placeholder-color);
+`;
+const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
+  width: 12px;
+  height: 12px;
+  fill: var(--search-input-placeholder-color);
+`;
+//# sourceMappingURL=InputWrapper.js.map

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function MobileSearchTrigger({ onClick }: {
+    onClick: () => void;
+}): JSX.Element;

package/lib/components/Search/MobileSearchTrigger.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSearchTrigger = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+function MobileSearchTrigger({ onClick }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/MobileSearchTrigger", onClick: onClick },
+        React.createElement(SearchIcon, null)));
+}
+exports.MobileSearchTrigger = MobileSearchTrigger;
+const SearchIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
+  width: 20px;
+  height: 20px;
+  fill: #8d8d8d;
+`;
+const Wrapper = styled_components_1.default.div `
+  display: block;
+  user-select: none;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;
+//# sourceMappingURL=MobileSearchTrigger.js.map

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function RecentSearches({ onSelect }: {
+    onSelect: (value: string) => void;
+}): JSX.Element | null;

package/lib/components/Search/RecentSearches.js

@@ -0,0 +1,129 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecentSearches = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClockBackwardsIcon_1 = require("../../components/Search/ClockBackwardsIcon");
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+const search_1 = require("../../mocks/search");
+const hooks_1 = require("../../mocks/hooks");
+function RecentSearches({ onSelect }) {
+    const { items, removeSearchHistoryItem } = (0, search_1.useRecentSearches)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        title: 'theme.search.recent',
+    };
+    if (!items || !items.length)
+        return null;
+    const removeItem = (e, item) => {
+        e.stopPropagation();
+        removeSearchHistoryItem(item);
+    };
+    const handleKeyDown = (e, item) => {
+        if (e.key === 'Enter') {
+            onSelect(item);
+        }
+    };
+    return (React.createElement(Wrapper, { "data-component-name": "Search/RecentSearches" },
+        React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Recent searches')),
+        React.createElement(RecentItems, null, items.map((item) => (React.createElement(Item, { key: item, onClick: () => onSelect(item), onKeyDown: (e) => handleKeyDown(e, item), tabIndex: 0, role: "link" },
+            React.createElement(Group, null,
+                React.createElement(ClockBackwardsIcon, null),
+                item),
+            React.createElement(ClearIcon, { onClick: (e) => removeItem(e, item) })))))));
+}
+exports.RecentSearches = RecentSearches;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const Title = styled_components_1.default.div `
+  color: var(--search-item-title-text-color);
+  font-weight: 600;
+  font-size: var(--font-size-small);
+  line-height: 20px;
+  padding: 8px 24px;
+`;
+const RecentItems = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px 12px 12px;
+`;
+const ClockBackwardsIcon = (0, styled_components_1.default)(ClockBackwardsIcon_1.ClockBackwardsIcon) `
+  width: 16px;
+  height: 16px;
+  fill: #8d8d8d;
+`;
+const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
+  display: inline;
+  width: 10px;
+  height: 10px;
+  fill: var(--search-item-active-text-color))
+`;
+const Item = styled_components_1.default.div `
+  display: flex;
+  font-size: var(--font-size-base);
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  color: var(--search-item-text-color);
+  width: 100%;
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--search-item-active-background-color);
+    color: var(--search-item-active-text-color);
+
+    ${ClockBackwardsIcon} {
+      fill: var(--search-item-active-text-color);
+    }
+
+    ${ClearIcon} {
+      display: inline;
+    }
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-primary-200);
+    border-radius: 2px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    ${ClearIcon} {
+      display: none;
+    }
+  }
+`;
+const Group = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+//# sourceMappingURL=RecentSearches.js.map

package/lib/components/Search/Search.js

@@ -27,41 +27,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Search = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const search_1 = require("../../mocks/search");
-const Autocomplete_1 = require("../../components/Search/Autocomplete");
-const SearchItem_1 = require("../../components/Search/SearchItem");
+const react_router_dom_1 = require("react-router-dom");
+const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
+const SearchTrigger_1 = require("../../components/Search/SearchTrigger");
+const MobileSearchTrigger_1 = require("../../components/Search/MobileSearchTrigger");
+const SearchDialog_1 = require("../../components/Search/SearchDialog");
 const hooks_1 = require("../../hooks");
-const usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
-const hooks_2 = require("../../mocks/hooks");
 function Search() {
-    const history = (0, usePreloadHistory_1.usePreloadHistory)();
-    const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)();
+    var _a, _b;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
-    const { translate } = (0, hooks_2.useTranslate)();
-    // TODO: ask somebody about typings
-    const navigate = (item) => history.push(item.url);
-    const renderAutocomplete = () => {
-        var _a, _b;
-        return (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: translate('theme.search.label', 'Search the docs'), keyShortcuts: (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'], renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }), isLoading: isLoading }));
-    };
-    return React.createElement(Wrapper, { "data-component-name": "Search/Search" }, renderAutocomplete());
+    const location = (0, react_router_dom_1.useLocation)();
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
+    const hotkeysKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
+    (0, react_1.useEffect)(() => {
+        if (hotkeysKeys) {
+            (0, hotkeys_js_1.default)(hotkeysKeys, (ev) => {
+                setIsOpen(true);
+                ev.preventDefault();
+            });
+            return () => hotkeys_js_1.default.unbind(hotkeysKeys);
+        }
+    }, [hotkeysKeys]);
+    const onClose = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+    }, []);
+    (0, react_1.useEffect)(onClose, [location, onClose]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search" },
+        react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: () => setIsOpen(true) }),
+        react_1.default.createElement(MobileSearchTrigger_1.MobileSearchTrigger, { onClick: () => setIsOpen(true) }),
+        isOpen && react_1.default.createElement(SearchDialog_1.SearchDialog, { onClose: onClose })));
 }
 exports.Search = Search;
 const Wrapper = styled_components_1.default.div `
   margin-left: auto;
 
   padding: 0 var(--navbar-item-padding-horizontal);
-
-  display: none;
-
-  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
-    display: block;
-  }
-
-  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
-    margin: 0 auto;
-  }
 `;
 //# sourceMappingURL=Search.js.map

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SearchDialog: ({ onClose }: {
+    onClose: () => void;
+}) => JSX.Element;