@redocly/theme 0.6.5 → 0.7.0

package/lib/Feedback/Comment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { CommentProps } from '../Feedback';
+export declare const Comment: ({ settings, onSubmit }: CommentProps) => JSX.Element;

package/lib/Feedback/Comment.js

@@ -0,0 +1,80 @@
+"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.Comment = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _theme_1 = require("../index.js");
+const Comment = ({ settings, onSubmit }) => {
+    const { label, submitText } = settings || {};
+    const [text, setText] = React.useState('');
+    const [submitValue, setSubmitValue] = React.useState('');
+    const send = () => {
+        if (!text)
+            return;
+        setSubmitValue(text);
+        onSubmit({ comment: text });
+    };
+    const handleTextAreaChange = (e) => {
+        setText(e.target.value);
+    };
+    if (submitValue) {
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment" },
+        React.createElement(Label, null, label || 'Please share your feedback with us:'),
+        React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
+        React.createElement(SendButton, { onClick: send }, "Send")));
+};
+exports.Comment = Comment;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+`;
+const TextArea = styled_components_1.default.textarea `
+  font-family: var(--font-family-base);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  color: black;
+  margin: 0 0 10px 0;
+  padding: 10px;
+`;
+const SendButton = (0, styled_components_1.default)(_theme_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+//# sourceMappingURL=Comment.js.map

package/lib/Feedback/Rating.js

@@ -29,19 +29,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rating = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Feedback_1 = require("../Feedback");
 const Rating = ({ settings, onSubmit }) => {
-    const { label, max, submitText } = settings || {};
-    const [submitValue, setSubmitValue] = React.useState(0);
-    if (submitValue) {
-        return (React.createElement(RatingWidget, null,
+    const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
+    const [score, setScore] = React.useState(0);
+    const [comment, setComment] = React.useState('');
+    const [reasons, setReasons] = React.useState([]);
+    if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
+        const { label: reasonsLabel, items, multi } = reasonsSettings;
+        const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
+        return (React.createElement(Feedback_1.Reasons, { onSubmit: ({ reasons }) => setReasons(reasons), settings: { label: reasonsLabel, items, multi, buttonText } }));
+    }
+    if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
+        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }));
+    }
+    if (score) {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+        });
+        return (React.createElement(Wrapper, null,
             React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
     }
-    return (React.createElement(RatingWidget, null,
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating" },
         React.createElement(Label, null, label || 'How helpful was this page?'),
-        React.createElement(Stars, { max: max || 5, onSubmit: (value) => {
-                setSubmitValue(value);
-                onSubmit(value);
-            } })));
+        React.createElement(Stars, { max: max || 5, onSubmit: setScore })));
 };
 exports.Rating = Rating;
 const Stars = ({ max, onSubmit }) => {
@@ -55,7 +68,7 @@ const Stars = ({ max, onSubmit }) => {
     }
     return React.createElement(React.Fragment, null, stars);
 };
-const RatingWidget = styled_components_1.default.div `
+const Wrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
 `;

package/lib/Feedback/Reasons.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ReasonsProps } from '../Feedback';
+export declare const Reasons: ({ settings, onSubmit }: ReasonsProps) => JSX.Element;

package/lib/Feedback/Reasons.js

@@ -0,0 +1,85 @@
+"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.Reasons = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _theme_1 = require("../index.js");
+const Reasons = ({ settings, onSubmit }) => {
+    const { label, multi, buttonText, items = [] } = settings;
+    const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+    if (!items.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    const input_type = multi ? 'checkbox' : 'radio';
+    const handleOptionChange = (position) => {
+        const updatedCheckedState = multi
+            ? checkedState.map((item, index) => (index === position ? !item : item))
+            : items.map((_, idx) => position === idx);
+        setCheckedState(updatedCheckedState);
+    };
+    const submitForm = () => {
+        onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
+    };
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons" },
+        React.createElement(Label, null, label || 'Which statement describes your thoughts about this page?'),
+        items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
+            React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("label", { id: reason, onClick: () => handleOptionChange(idx) }, reason)))),
+        React.createElement(SendButton, { onClick: submitForm }, buttonText || 'Send')));
+};
+exports.Reasons = Reasons;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+`;
+const SendButton = (0, styled_components_1.default)(_theme_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 15px;
+`;
+const OptionWrapper = styled_components_1.default.div `
+  margin: 5px 0;
+  display: flex;
+  input {
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  label {
+    font-size: 14px;
+    cursor: pointer;
+  }
+`;
+//# sourceMappingURL=Reasons.js.map

package/lib/Feedback/Sentiment.js

@@ -29,14 +29,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sentiment = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Feedback_1 = require("../Feedback");
 const Thumbs_1 = require("./Thumbs");
 const Sentiment = ({ settings, onSubmit }) => {
-    const { label } = settings || {};
-    return (React.createElement(Wrapper, null,
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [score, setScore] = React.useState(0);
+    const [comment, setComment] = React.useState('');
+    const [reasons, setReasons] = React.useState([]);
+    if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
+        const { label: reasonsLabel, items, multi } = reasonsSettings;
+        const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
+        return (React.createElement(Feedback_1.Reasons, { onSubmit: ({ reasons }) => setReasons(reasons), settings: { label: reasonsLabel, items, multi, buttonText } }));
+    }
+    if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
+        const commentLabel = score === 1
+            ? commentSettings.likeLabel || 'What was most helpful?'
+            : commentSettings.dislikeLabel || 'What can we improve?';
+        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
+    }
+    if (score) {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+        });
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment" },
         React.createElement(Label, null, label || 'Was this page helpful?'),
-        React.createElement(Vote, { onClick: () => onSubmit(1) },
+        React.createElement(Vote, { onClick: () => setScore(1) },
             React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
-        React.createElement(Vote, { onClick: () => onSubmit(-1) },
+        React.createElement(Vote, { onClick: () => setScore(-1) },
             React.createElement(Thumbs_1.ThumbDown, null))));
 };
 exports.Sentiment = Sentiment;

package/lib/Feedback/index.d.ts

@@ -1,3 +1,5 @@
-export { Rating } from './Rating';
-export { Sentiment } from './Sentiment';
+export { Rating } from '../Feedback/Rating';
+export { Sentiment } from '../Feedback/Sentiment';
+export { Comment } from '../Feedback/Comment';
+export { Reasons } from '../Feedback/Reasons';
 export * from './types';

package/lib/Feedback/index.js

@@ -14,10 +14,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sentiment = exports.Rating = void 0;
-var Rating_1 = require("./Rating");
+exports.Reasons = exports.Comment = exports.Sentiment = exports.Rating = void 0;
+var Rating_1 = require("../Feedback/Rating");
 Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
-var Sentiment_1 = require("./Sentiment");
+var Sentiment_1 = require("../Feedback/Sentiment");
 Object.defineProperty(exports, "Sentiment", { enumerable: true, get: function () { return Sentiment_1.Sentiment; } });
+var Comment_1 = require("../Feedback/Comment");
+Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return Comment_1.Comment; } });
+var Reasons_1 = require("../Feedback/Reasons");
+Object.defineProperty(exports, "Reasons", { enumerable: true, get: function () { return Reasons_1.Reasons; } });
 __exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib/Feedback/types.d.ts

@@ -1,21 +1,66 @@
 export type RatingProps = {
-    onSubmit: (value: number) => void;
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
     settings?: {
         label?: string;
         max?: number;
         submitText?: string;
+        comment?: {
+            enable: boolean;
+            label?: string;
+        };
+        reasons?: {
+            enable: boolean;
+            label?: string;
+            multi?: boolean;
+            items: string[];
+        };
     };
 };
 export type SentimentProps = {
-    onSubmit: (value: -1 | 1) => void;
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
     settings?: {
         label?: string;
+        submitText?: string;
+        comment?: {
+            enable: boolean;
+            likeLabel?: string;
+            dislikeLabel?: string;
+        };
+        reasons?: {
+            enable: boolean;
+            label?: string;
+            multi?: boolean;
+            items: string[];
+        };
     };
 };
 export type CommentProps = {
-    onSubmit: (value: string) => void;
+    onSubmit: (value: {
+        comment: string;
+    }) => void;
     settings?: {
         label?: string;
+        submitText?: string;
+    };
+};
+export type ReasonsProps = {
+    onSubmit: (value: {
+        reasons: string[];
+    }) => void;
+    settings: {
+        label?: string;
+        multi?: boolean;
+        items: string[];
+        submitText?: string;
+        buttonText?: string;
     };
 };
 export type ProblemProps = {

package/lib/Markdown/Tabs/Tab.js

@@ -14,15 +14,21 @@ exports.Tab = Tab;
 const TabItem = styled_components_1.default.li `
   display: inline-block;
   list-style: none;
-  margin-bottom: -1px;
   padding: 0.75rem 1rem;
   cursor: pointer;
 
-  ${({ active }) => active &&
+  ${({ active }) => active
+    ? `
+      background-color: var(--background-color);
+      border: solid var(--md-tabs-active-tab-border-color);
+      border-width: 0 0 1px 0;
+      color: var(--text-color);
     `
-    background-color: white;
-    border: solid #ccc;
-    border-width: 1px 1px 0 1px;
+    : `
+    &:hover {
+      border: solid var(--md-tabs-hover-tab-border-color);
+      border-width: 0 0 1px 0;
+    }
   `}
 `;
 //# sourceMappingURL=Tab.js.map

package/lib/Markdown/Tabs/Tabs.js

@@ -47,16 +47,25 @@ function Tabs({ children }) {
 exports.Tabs = Tabs;
 const TabsContainer = styled_components_1.default.div `
   margin: 10px 0;
+
+  ol[class^='Tabs__TabList'] {
+    margin: 0;
+    padding: 0;
+  }
 `;
 const TabList = styled_components_1.default.ol `
-  border-bottom: 1px solid #ccc;
+  color: var(--md-tabs-tab-text-color);
   padding: 0;
   margin-block-end: 0;
+  border: solid var(--color-secondary-400);
+  border-width: 0 0 1px 0;
+
+  li[class^='Tab__TabItem'] {
+    margin: 0;
+    margin-bottom: -1px;
+  }
 `;
 const TabContent = styled_components_1.default.div `
-  padding: 10px 5px;
-  border: 1px solid #ccc;
-  border-top: none;
-  padding: 1rem;
+  padding: 1rem 0;
 `;
 //# sourceMappingURL=Tabs.js.map

package/lib/Navbar/Navbar.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Navbar_1 = require("../Navbar");
 const useMobileMenu_1 = require("../hooks/useMobileMenu");
+const utils_1 = require("../utils");
 const MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 const MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
 const ColorModeSwitcher_1 = require("../ColorModeSwitcher/ColorModeSwitcher");
@@ -22,8 +23,9 @@ function Navbar({ menu, logo, search, profile }) {
     }
     const openMobileMenu = () => setIsOpen(true);
     const closeMobileMenu = () => setIsOpen(false);
+    const menuItemsExist = !(0, utils_1.isPrimitive)(menu) && !(0, utils_1.isEmptyArray)(menu);
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
-        react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
+        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 : search })),
         react_1.default.createElement(exports.NavbarRow, null,
             logo,

package/lib/Pages/Forbidden.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Forbidden(): JSX.Element;

package/lib/Pages/Forbidden.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Forbidden = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../Button");
+function Forbidden() {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/Forbidden" },
+        react_1.default.createElement(Header, null, "403"),
+        react_1.default.createElement(Description, null, "Access forbidden"),
+        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/" }, "Open Homepage")));
+}
+exports.Forbidden = Forbidden;
+const Wrapper = styled_components_1.default.div `
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+const Header = styled_components_1.default.div `
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+const Description = styled_components_1.default.div `
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+const HomeButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin-top: var(--page-403-button-margin);
+`;
+//# sourceMappingURL=Forbidden.js.map

package/lib/Pages/NotFound.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function NotFound(): JSX.Element;

package/lib/Pages/NotFound.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotFound = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../Button");
+function NotFound() {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/NotFound" },
+        react_1.default.createElement(Header, null, "404"),
+        react_1.default.createElement(Description, null, "It looks like you're lost"),
+        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/" }, "Open Homepage")));
+}
+exports.NotFound = NotFound;
+const Wrapper = styled_components_1.default.div `
+  margin: 25px auto;
+  font-family: var(--page-404-font-family);
+  text-align: center;
+`;
+const Header = styled_components_1.default.div `
+  color: var(--page-404-header-text-color);
+  margin: var(--page-404-header-margin);
+  font-size: var(--page-404-header-font-size);
+  line-height: var(--page-404-header-line-height);
+  font-weight: var(--page-404-header-font-weight);
+`;
+const Description = styled_components_1.default.div `
+  color: var(--page-404-description-text-color);
+  margin: var(--page-404-description-margin);
+  font-size: var(--page-404-description-font-size);
+  line-height: var(--page-404-description-line-height);
+  font-weight: var(--page-404-description-font-weight);
+`;
+const HomeButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin-top: var(--page-404-button-margin);
+`;
+//# sourceMappingURL=NotFound.js.map

package/lib/Pages/index.d.ts

@@ -0,0 +1 @@
+export * from '../Pages/NotFound';

package/lib/Pages/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../Pages/NotFound"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Search/Autocomplete.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { ActiveItem } from '../mocks/types';
 interface AutocompleteProps<T> {
@@ -8,6 +9,8 @@ interface AutocompleteProps<T> {
     change(value: string): void;
     select(item: T): void;
     children?(isOpen: boolean, close: () => void): ReactNode;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    keyShortcuts?: string[];
 }
-export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, children, }: AutocompleteProps<T>): JSX.Element;
+export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, children, keyShortcuts, }: AutocompleteProps<T>): JSX.Element;
 export {};

package/lib/Search/Autocomplete.js

@@ -30,12 +30,26 @@ exports.Autocomplete = void 0;
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
+const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
 const Input_1 = require("../Search/Input");
 const Popover_1 = require("../Search/Popover");
-function Autocomplete({ placeholder, value, items, change, select, renderItem, children, }) {
+const ShortcutKey_1 = require("../Search/ShortcutKey");
+function Autocomplete({ placeholder, value, items, change, select, renderItem, children, keyShortcuts, }) {
     const location = (0, react_router_dom_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [activeIdx, setActiveIdx] = (0, react_1.useState)(-1);
+    const refInput = (0, react_1.useRef)(null);
+    const hotkeysKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
+    (0, react_1.useEffect)(() => {
+        if (hotkeysKeys) {
+            (0, hotkeys_js_1.default)(hotkeysKeys, (ev) => {
+                var _a;
+                (_a = refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+                ev.preventDefault();
+            });
+            return () => hotkeys_js_1.default.unbind(hotkeysKeys);
+        }
+    }, [hotkeysKeys]);
     const open = () => setIsOpen(true);
     const close = () => {
         setIsOpen(false);
@@ -66,6 +80,7 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
                 break;
             case 'Enter':
                 if (activeIdx > -1) {
+                    reset();
                     select(items[activeIdx]);
                 }
                 break;
@@ -78,9 +93,10 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
     (0, react_1.useEffect)(close, [location]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Autocomplete" },
         isOpen ? react_1.default.createElement(Overlay, { onClick: close }) : null,
-        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown },
-            react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: open, onClick: stopPropagation }), children === null || children === void 0 ? void 0 :
+        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown }, children === null || children === void 0 ? void 0 :
             children(isOpen, reset),
+            react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: open, onClick: stopPropagation, ref: refInput }),
+            !isOpen && react_1.default.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts }),
             isOpen && value ? (react_1.default.createElement(Popover_1.Popover, null, items.length ? items.map(mapItem) : react_1.default.createElement(Message, null, "No results"))) : null)));
 }
 exports.Autocomplete = Autocomplete;

package/lib/Search/ClearIcon.js

@@ -15,7 +15,7 @@ exports.ClearIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
   cursor: pointer;
   width: 0.5em;
   height: 0.5em;
-  right: 1.2em;
+  left: 1.2em;
   fill: var(--search-input-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/Search/Input.js

@@ -8,7 +8,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 exports.FormInput = styled_components_1.default.input.attrs(() => ({
     'data-component-name': 'Search/Input',
 })) `
-  padding: 1em 2.5em 1em 1em;
+  padding: 1em 2.5em 1em 2.5em;
   background-color: var(--search-input-background-color);
   border-radius: var(--search-input-border-radius);
   border: var(--search-input-border);