@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Search/RecentSearches.js

@@ -0,0 +1,126 @@
+"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, className, }) {
+    const { items, removeSearchHistoryItem } = (0, search_1.useRecentSearches)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    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", className: className },
+        React.createElement(Title, { "data-translation-key": "theme.search.recent" }, translate('theme.search.recent', '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: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  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: var(--text-description);
+`;
+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);
+    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.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function Search({ className }: {
+    className?: string;
+}): JSX.Element;

package/lib/components/Search/Search.js

@@ -0,0 +1,75 @@
+"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.Search = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+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 telemetry_1 = require("../../mocks/telemetry");
+function Search({ className }) {
+    var _a, _b;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const themeSettings = (0, hooks_1.useThemeConfig)();
+    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);
+                telemetry_1.telemetry.send('search_opened', { method: 'shortcut' });
+                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", className: className },
+        react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: () => {
+                telemetry_1.telemetry.send('search_opened', { method: 'click' });
+                setIsOpen(true);
+            } }),
+        react_1.default.createElement(MobileSearchTrigger_1.MobileSearchTrigger, { onClick: () => {
+                telemetry_1.telemetry.send('search_opened', { method: 'click' });
+                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;
+`;
+//# sourceMappingURL=Search.js.map

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

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

package/lib/components/Search/SearchDialog.js

@@ -0,0 +1,146 @@
+"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.SearchDialog = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../utils");
+const search_1 = require("../../mocks/search");
+const InputWrapper_1 = require("../../components/Search/InputWrapper");
+const SearchItem_1 = require("../../components/Search/SearchItem");
+const hooks_1 = require("../../mocks/hooks");
+const Shortcut_1 = require("../../components/Search/Shortcut");
+const RecentSearches_1 = require("../../components/Search/RecentSearches");
+const SuggestedPages_1 = require("../../components/Search/SuggestedPages");
+const CancelSearch_1 = require("../../components/Search/CancelSearch");
+const useDialogHotKeys_1 = require("../../hooks/useDialogHotKeys");
+const ProductTag_1 = require("../../components/Search/ProductTag");
+const SearchDialog = ({ onClose, className, }) => {
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const [product, setProduct] = (0, react_1.useState)(currentProduct);
+    const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)(product === null || product === void 0 ? void 0 : product.name);
+    const modalRef = (0, react_1.useRef)(null);
+    const { translate } = (0, hooks_1.useTranslate)();
+    (0, useDialogHotKeys_1.useDialogHotKeys)(modalRef, onClose);
+    const handleOverlayClick = (event) => {
+        var _a;
+        const target = event.target;
+        if (typeof target.className !== 'string')
+            return;
+        if ((_a = target.className) === null || _a === void 0 ? void 0 : _a.includes(' overlay')) {
+            onClose();
+        }
+    };
+    const mapItem = (item) => {
+        var _a;
+        return (react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item, product: !product ? (_a = item.product) === null || _a === void 0 ? void 0 : _a.name : undefined }));
+    };
+    return (react_1.default.createElement(Overlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
+        react_1.default.createElement(Container, null,
+            react_1.default.createElement(TopContainer, null,
+                react_1.default.createElement(InputWrapper_1.InputWrapper, { value: query, change: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading }),
+                product && react_1.default.createElement(ProductTag_1.ProductTag, { label: product.name, onRemove: () => setProduct(undefined) })),
+            react_1.default.createElement(Results, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": "theme.search.noResults" }, translate('theme.search.noResults', 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(RecentSearches_1.RecentSearches, { onSelect: setQuery }),
+                react_1.default.createElement(SuggestedPages_1.SuggestedPages, null)))),
+            react_1.default.createElement(BottomContainer, null,
+                react_1.default.createElement(Shortcuts, null,
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": "theme.search.keys.navigate", combination: "Tab", text: translate('theme.search.keys.navigate', 'to navigate') }),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": "theme.search.keys.select", combination: "\u21B5", text: translate('theme.search.keys.select', 'to select') }),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": "theme.search.keys.exit", combination: "Esc", text: translate('theme.search.keys.exit', 'to exit') })),
+                react_1.default.createElement(CancelSearch_1.CancelSearch, { onClick: onClose })))));
+};
+exports.SearchDialog = SearchDialog;
+const Overlay = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: var(--z-index-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    border-radius: 0;
+    width: 100vw;
+    height: 100vh;
+
+    ${({ theme }) => theme.mediaQueries.small} {
+      border-radius: 8px;
+      width: 600px;
+      height: auto;
+    }
+  }
+`;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+const Results = styled_components_1.default.div `
+  flex-grow: 1;
+  overflow-y: scroll;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    height: 224px;
+  }
+`;
+const BottomContainer = styled_components_1.default.footer ``;
+const Shortcuts = styled_components_1.default.div `
+  display: none;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 16px 12px;
+  gap: 16px;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    display: flex;
+  }
+`;
+const Message = styled_components_1.default.div `
+  padding: 24px;
+  color: var(--search-item-title-text-color);
+`;
+const TopContainer = styled_components_1.default.header `
+  display: flex;
+  align-items: center;
+  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;
+  }
+`;
+//# sourceMappingURL=SearchDialog.js.map

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+export declare const SearchIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => React.JSX.Element, any, {}, never>;

package/lib/components/Search/SearchIcon.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.SearchIcon = 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", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-component-name": "Search/SearchIcon" }, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66667 2.5C5.84258 2.5 5.037 2.74437 4.35179 3.20221C3.66659 3.66005 3.13254 4.31079 2.81717 5.07215C2.50181 5.83351 2.41929 6.67129 2.58006 7.47954C2.74084 8.2878 3.13767 9.03023 3.72039 9.61295C4.30311 10.1957 5.04554 10.5925 5.85379 10.7533C6.66205 10.914 7.49982 10.8315 8.26118 10.5162C9.02254 10.2008 9.67329 9.66675 10.1311 8.98154C10.589 8.29634 10.8333 7.49076 10.8333 6.66667C10.8333 5.5616 10.3943 4.50179 9.61295 3.72039C8.83155 2.93899 7.77174 2.5 6.66667 2.5ZM3.79622 2.37074C4.64588 1.80302 5.6448 1.5 6.66667 1.5C8.03695 1.5 9.35112 2.04434 10.3201 3.01328C11.289 3.98222 11.8333 5.29638 11.8333 6.66667C11.8333 7.68854 11.5303 8.68746 10.9626 9.53711C10.8672 9.67996 10.7649 9.8175 10.6565 9.94935L14.3536 13.6464C14.5488 13.8417 14.5488 14.1583 14.3536 14.3536C14.1583 14.5488 13.8417 14.5488 13.6464 14.3536L9.94935 10.6565C9.55739 10.979 9.11792 11.2437 8.64387 11.44C7.69978 11.8311 6.66094 11.9334 5.6587 11.7341C4.65647 11.5347 3.73586 11.0426 3.01328 10.3201C2.29071 9.59748 1.79864 8.67687 1.59928 7.67463C1.39992 6.6724 1.50224 5.63355 1.89329 4.68947C2.28434 3.74538 2.94657 2.93846 3.79622 2.37074Z", fill: "#A8A8A8" })));
+exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
+    'data-component-name': 'Search/SearchIcon',
+    className,
+})) `
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  left: 0.8em;
+  fill: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 1.2em;
+    height: 1.2em;
+  }
+`;
+//# sourceMappingURL=SearchIcon.js.map

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ActiveItem } from '../../types/portal/src/shared/types/activeItem';
+import type { SearchDocument } from '../../types/portal/src/shared/types/searchDocument';
+interface SearchItemProps {
+    item: ActiveItem<SearchDocument>;
+    product?: string;
+    className?: string;
+}
+export declare function SearchItem({ item, className, product }: SearchItemProps): JSX.Element;
+export {};

package/lib/components/Search/SearchItem.js

@@ -0,0 +1,130 @@
+"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.SearchItem = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../components/Tag");
+const Link_1 = require("../../mocks/Link");
+const utils_1 = require("../../components/Search/utils");
+const ProductTag_1 = require("../../components/Search/ProductTag");
+function SearchItem({ item, className, product }) {
+    var _a, _b, _c, _d;
+    const ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (item.active) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [item.active]);
+    const header = (react_1.default.createElement(Wrapper, null,
+        product && react_1.default.createElement(ProductTag, { label: product }),
+        item.httpVerb ? (react_1.default.createElement(Operation, null,
+            react_1.default.createElement(Tag_1.Tag, { color: item.httpVerb }, item.httpVerb.toUpperCase()),
+            item.pathName ? (0, utils_1.highlight)(item.pathName) : null)) : null,
+        react_1.default.createElement(Title, null, (0, utils_1.highlight)(item.title)),
+        Array.isArray(item.text) ? react_1.default.createElement(Description, null, (0, utils_1.highlight)(item.text)) : null));
+    const itemParam = (_a = item.parameters) === null || _a === void 0 ? void 0 : _a[0];
+    return (react_1.default.createElement(react_1.default.Fragment, null, itemParam ? (react_1.default.createElement(SearchLink, { className: className, key: `${item.id}-${0}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        header,
+        react_1.default.createElement(Place, null,
+            react_1.default.createElement("div", null,
+                `${itemParam.place} → ${((_b = itemParam.path) === null || _b === void 0 ? void 0 : _b.length) ? ((_c = itemParam.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : ''}`,
+                (0, utils_1.highlight)(itemParam.name)),
+            react_1.default.createElement("div", null, (0, utils_1.highlight)(itemParam.description))))) : (react_1.default.createElement(SearchLink, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        header,
+        react_1.default.createElement(Path, null, (_d = item.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))));
+}
+exports.SearchItem = SearchItem;
+const Wrapper = styled_components_1.default.div `
+  position: relative;
+`;
+const Title = styled_components_1.default.div `
+  font-weight: var(--font-weight-regular);
+  color: var(--search-item-title-text-color);
+  padding: 6px 0 2px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-base);
+`;
+const SearchLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: block;
+  text-decoration: none;
+  padding: var(--search-item-padding);
+  transition: background-color 0.3s ease;
+  outline: none;
+  white-space: nowrap;
+  color: var(--search-item-text-color);
+  background-color: var(--search-item-background-color);
+
+  &:hover,
+  &:focus {
+    color: var(--search-item-active-text-color);
+    background-color: var(--search-item-active-background-color);
+    ${Title} {
+      color: var(--search-item-active-title-text-color);
+    }
+  }
+`;
+const Operation = styled_components_1.default.div `
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-base);
+  color: var(--search-item-path-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Description = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Path = styled_components_1.default.div `
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 22px;
+`;
+const Place = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:first-child {
+    padding-top: 0;
+  }
+`;
+const ProductTag = (0, styled_components_1.default)(ProductTag_1.ProductTag) `
+  position: absolute;
+  right: 0;
+  top: 6px;
+  margin-right: 0;
+`;
+//# sourceMappingURL=SearchItem.js.map

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

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

package/lib/components/Search/SearchTrigger.js

@@ -0,0 +1,76 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchTrigger = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../hooks");
+const hooks_2 = require("../../mocks/hooks");
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+const ShortcutKey_1 = require("../../components/Search/ShortcutKey");
+function SearchTrigger({ onClick, className, }) {
+    var _a, _b;
+    const themeSettings = (0, hooks_1.useThemeConfig)();
+    const { translate } = (0, hooks_2.useTranslate)();
+    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 : ['/'];
+    return (React.createElement(Wrapper, { "data-component-name": "Search/SearchTrigger", onClick: onClick, className: className },
+        React.createElement(SearchIconSmall, null),
+        React.createElement(Label, { "data-translation-key": "theme.search.navbar.label" }, translate('theme.search.navbar.label', 'Search')),
+        React.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts })));
+}
+exports.SearchTrigger = SearchTrigger;
+const Wrapper = styled_components_1.default.div `
+  display: none;
+  align-items: center;
+  cursor: pointer;
+  color: var(--search-trigger-text-color);
+  background-color: var(--search-trigger-background-color);
+  border: var(--search-trigger-border);
+  border-radius: var(--search-trigger-border-radius);
+  padding: var(--search-trigger-padding);
+  user-select: none;
+  gap: var(--search-trigger-gap);
+
+  :hover {
+    background-color: var(--search-trigger-hover-background-color);
+  }
+
+  ${({ theme }) => {
+    return (0, styled_components_1.css) `
+      ${theme.mediaQueries.small} {
+        display: flex;
+      }
+    `;
+}}
+`;
+const Label = styled_components_1.default.span `
+  font-size: var(--search-trigger-font-size);
+`;
+const SearchIconSmall = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
+  width: var(--search-trigger-icon-size);
+  height: var(--search-trigger-icon-size);
+  fill: var(--search-trigger-text-color);
+`;
+//# sourceMappingURL=SearchTrigger.js.map

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function Shortcut({ combination, text, className, }: {
+    combination: string;
+    text: string;
+    className?: string;
+}): JSX.Element;