@redocly/theme 0.54.0-next.0 → 0.54.0-next.2

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -176,6 +176,10 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
     display: flex;
   }
 
+  .tree-view-comment {
+    color: var(--code-block-tree-view-comment-color);
+  }
+
   .tree-view-branch {
     color: var(--code-block-tree-view-lines-color);
   }

package/lib/components/CodeBlock/variables.js

@@ -132,6 +132,7 @@ exports.code = (0, styled_components_1.css) `
    */
   --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
   --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
+  --code-block-tree-view-comment-color: var(--input-content-placeholder-color); // @presenter Color
 
   // @tokens End
 `;

package/lib/components/Feedback/Mood.js

@@ -157,10 +157,15 @@ function Mood({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            onSubmitMoodForm();
+                        }
+                    } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));
@@ -199,6 +204,12 @@ const Label = styled_components_1.default.h4 `
 
   margin: 0;
 `;
+const InputLabel = styled_components_1.default.h4 `
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
 const ButtonsContainer = styled_components_1.default.div `
   display: flex;
   justify-content: end;

package/lib/components/Feedback/Rating.js

@@ -102,10 +102,15 @@ function Rating({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            onSubmitRatingForm();
+                        }
+                    } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
@@ -143,6 +148,12 @@ const Label = styled_components_1.default.h4 `
   color: var(--feedback-header-text-color);
   margin: 0;
 `;
+const InputLabel = styled_components_1.default.h4 `
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
 const ButtonsContainer = styled_components_1.default.div `
   display: flex;
   justify-content: end;

package/lib/components/Feedback/Scale.js

@@ -109,10 +109,15 @@ function Scale({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } }))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            onSubmitScaleForm();
+                        }
+                    } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));
@@ -132,6 +137,12 @@ const Label = styled_components_1.default.h4 `
   margin: 0;
   width: 100%;
 `;
+const InputLabel = styled_components_1.default.h4 `
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
 const SubLabelContainer = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;

package/lib/components/Feedback/Sentiment.js

@@ -141,10 +141,15 @@ function Sentiment({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            onSubmitSentimentForm();
+                        }
+                    } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
@@ -163,6 +168,12 @@ const Label = styled_components_1.default.h4 `
   color: var(--feedback-header-text-color);
   margin: 0;
 `;
+const InputLabel = styled_components_1.default.h4 `
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
 const StyledForm = styled_components_1.default.form `
   width: 100%;
   gap: var(--spacing-sm);

package/lib/components/Image/Image.d.ts

@@ -8,6 +8,7 @@ export type ImageProps = {
     height?: string | number;
     border?: string;
     withLightbox?: boolean;
+    lightboxStyle?: React.CSSProperties | string;
     style?: React.CSSProperties | string;
 };
 export declare function Image(props: ImageProps): JSX.Element;

package/lib/components/Image/Image.js

@@ -1,30 +1,68 @@
 "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.Image = Image;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 function Image(props) {
-    const { src, srcSet, alt, className, width, height, border, style, withLightbox } = props;
-    const [lightboxImage, setLightboxImage] = react_1.default.useState(undefined);
-    const parsedSourceSetMap = react_1.default.useMemo(() => {
+    const { src, srcSet, alt, className, width, height, border, style, withLightbox, lightboxStyle } = props;
+    const lightboxContainerRef = (0, react_1.useRef)(null);
+    const [lightboxImage, setLightboxImage] = (0, react_1.useState)(undefined);
+    const parsedSourceSetMap = (0, react_1.useMemo)(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
     }, [srcSet]);
-    const handleImageClick = (src) => {
+    const handleLightboxKeyDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (e.key === 'Escape') {
+            setLightboxImage(undefined);
+        }
+    }, []);
+    const handleImageClick = (0, react_1.useCallback)((src) => {
         if (!withLightbox || lightboxImage) {
             return;
         }
         setLightboxImage(src);
-    };
-    const handleCloseLightbox = () => {
+    }, [withLightbox, lightboxImage]);
+    const handleCloseLightbox = (0, react_1.useCallback)(() => {
         setLightboxImage(undefined);
-    };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (lightboxImage) {
+            (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [lightboxImage]);
     const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
+    const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? { cssText: lightboxStyle } : lightboxStyle;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        lightboxImage ? (react_1.default.createElement(LightboxContainer, { onClick: handleCloseLightbox },
+        lightboxImage ? (react_1.default.createElement(LightboxContainer, { ref: lightboxContainerRef, onClick: handleCloseLightbox, onKeyDown: handleLightboxKeyDown, tabIndex: 0 },
+            react_1.default.createElement(Overlay, { style: lightboxOverlayStyles }),
             react_1.default.createElement(Image, { src: lightboxImage, alt: alt }))) : null,
         src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, "$withLightbox": withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))))));
 }
@@ -37,20 +75,32 @@ const ColorModeAwareImage = styled_components_1.default.img `
     cursor: pointer;
   `}
 `;
+const Overlay = styled_components_1.default.div `
+  background-color: var(--bg-color-modal-overlay);
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+`;
 const LightboxContainer = styled_components_1.default.div `
+  display: grid;
+  height: 100vh;
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--bg-color-modal-overlay);
+  width: 100vw;
   z-index: var(--z-index-overlay);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+  &:focus {
+    outline: none;
+  }
 
   img {
     cursor: pointer;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    margin: auto;
     max-width: 90%;
     max-height: 90%;
   }

package/lib/components/Search/SearchDialog.js

@@ -59,6 +59,7 @@ function SearchDialog({ onClose, className }) {
     const autoSearchDisabled = mode !== 'search';
     const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
     const aiSearch = useAiSearch({ filter });
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
@@ -66,7 +67,15 @@ function SearchDialog({ onClose, className }) {
     const firstSearchResultRef = (0, react_1.useRef)(null);
     const searchKeysWithResults = items ? Object.keys(items).filter((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) : [];
     const { translate } = useTranslate();
-    (0, hooks_1.useDialogHotKeys)(modalRef, onClose);
+    const handleClose = (0, react_1.useCallback)(() => {
+        var _a;
+        const value = (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        if (value) {
+            addSearchHistoryItem(value);
+        }
+        onClose();
+    }, [addSearchHistoryItem, onClose]);
+    (0, hooks_1.useDialogHotKeys)(modalRef, handleClose);
     const focusSearchInput = () => {
         requestAnimationFrame(() => {
             var _a;
@@ -79,16 +88,16 @@ function SearchDialog({ onClose, className }) {
         }
     }, [mode, aiSearch.isGeneratingResponse, setQuery]);
     (0, react_1.useEffect)(focusSearchInput, []);
-    const handleOverlayClick = (event) => {
+    const handleOverlayClick = (0, react_1.useCallback)((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();
+            handleClose();
         }
-    };
-    const mapItem = (item, index, results, innerRef) => {
+    }, [handleClose]);
+    const mapItem = (0, react_1.useCallback)((item, index, results, innerRef) => {
         var _a;
         let itemProduct;
         if (!product && item.document.product) {
@@ -99,6 +108,7 @@ function SearchDialog({ onClose, className }) {
                 : undefined;
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
+                addSearchHistoryItem(query);
                 otelTelemetry.send('search.result.clicked', {
                     query,
                     url: item.document.url,
@@ -107,8 +117,8 @@ function SearchDialog({ onClose, className }) {
                     search_engine: mode,
                 });
             } }));
-    };
-    const showLoadMore = (groupKey, currentCount = 0) => {
+    }, [product, products, addSearchHistoryItem, query, otelTelemetry, mode]);
+    const showLoadMore = (0, react_1.useCallback)((groupKey, currentCount = 0) => {
         const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
         if (groupFacet) {
@@ -122,7 +132,7 @@ function SearchDialog({ onClose, className }) {
             needLoadMore = groupValue ? groupValue.count > currentCount : false;
         }
         return needLoadMore;
-    };
+    }, [facets, groupField]);
     const showResults = !!((filter && filter.length) || query);
     const showSearchFilterButton = advancedSearch && mode === 'search';
     const showAiSearchButton = askAi && mode === 'search';
@@ -220,7 +230,7 @@ function SearchDialog({ onClose, className }) {
                 isSearchLoading && (react_1.default.createElement(SearchLoading, null,
                     react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
                     translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel'))))))));
+                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: handleClose }, translate('search.cancel', 'Cancel'))))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;

package/lib/components/Search/SearchInput.js

@@ -14,26 +14,24 @@ const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon")
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
     const telemetry = useTelemetry();
+    const { onKeyDown } = (0, hooks_1.useInputKeyCommands)({
+        onEnter: (event) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event),
+        onClear: () => addSearchHistoryItem(value),
+    });
     const stopPropagation = (event) => event.stopPropagation();
     const handleOnChange = (event) => {
         onChange(event.target.value);
     };
     const handleOnReset = () => {
         onChange('');
+        addSearchHistoryItem(value);
         telemetry.send('search_input_reset_button_clicked', {});
     };
-    const handleOnKeyUp = (e) => {
-        if (!onSubmit) {
-            return;
-        }
-        if (e.key === 'Enter') {
-            onSubmit(e);
-        }
-    };
     return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
         showReturnButton ? (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null), onClick: onReturn })) : value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "24px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "24px", color: "--search-input-icon-color" })),
-        react_1.default.createElement(SearchInputField, { value: value, ref: inputRef, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation, onKeyUp: handleOnKeyUp }),
+        react_1.default.createElement(SearchInputField, { value: value, ref: inputRef, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation, onKeyDown: onKeyDown }),
         !!value && (react_1.default.createElement(ResetButton, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, null), tabIndex: -1 }))));
 }
 const SearchInputWrapper = styled_components_1.default.div `

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

@@ -11,3 +11,4 @@ export declare const enum AiSearchConversationRole {
     ASSISTANT = "assistant"
 }
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
+export declare const SEARCH_DEBOUNCE_TIME_MS = 300;

package/lib/core/constants/search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
 var AiSearchError;
 (function (AiSearchError) {
     AiSearchError["Unauthorized"] = "ai_search_unauthorized";
@@ -37,4 +37,5 @@ exports.AI_SEARCH_ERROR_CONFIG = {
     [AiSearchError.EmptyResponse]: defaultErrorConfig,
     [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 };
+exports.SEARCH_DEBOUNCE_TIME_MS = 300;
 //# sourceMappingURL=search.js.map

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

@@ -25,3 +25,4 @@ export * from '../../../core/hooks/search/use-search-dialog';
 export * from '../../../core/hooks/use-language-picker';
 export * from '../../../core/hooks/__mocks__/use-element-size';
 export * from '../../../core/hooks/__mocks__/use-time-ago';
+export * from '../../../core/hooks/__mocks__/use-input-key-commands';

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

@@ -41,4 +41,5 @@ __exportStar(require("../../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-language-picker"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-element-size"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-time-ago"), exports);
+__exportStar(require("../../../core/hooks/__mocks__/use-input-key-commands"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-input-key-commands.d.ts

@@ -0,0 +1,3 @@
+export declare const useInputKeyCommands: jest.Mock<{
+    onKeyDown: jest.Mock<any, any, any>;
+}, [], any>;

package/lib/core/hooks/__mocks__/use-input-key-commands.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputKeyCommands = void 0;
+exports.useInputKeyCommands = jest.fn(() => ({
+    onKeyDown: jest.fn(),
+}));
+//# sourceMappingURL=use-input-key-commands.js.map

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

@@ -35,3 +35,4 @@ export * from '../../core/hooks/code-walkthrough/use-code-panel';
 export * from '../../core/hooks/code-walkthrough/use-renderable-files';
 export * from '../../core/hooks/use-element-size';
 export * from '../../core/hooks/use-time-ago';
+export * from '../../core/hooks/use-input-key-commands';

package/lib/core/hooks/index.js

@@ -51,4 +51,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), export
 __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
 __exportStar(require("../../core/hooks/use-element-size"), exports);
 __exportStar(require("../../core/hooks/use-time-ago"), exports);
+__exportStar(require("../../core/hooks/use-input-key-commands"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/menu/use-nested-menu.js

@@ -38,8 +38,14 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
         },
     });
     function scrollIfNeeded(el, centerIfNeeded = false) {
+        const rect = el.getBoundingClientRect();
+        const isInViewport = rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+        // Only scroll if element is in viewport to prevent page jumping
         // @ts-ignore
-        if (typeof el.scrollIntoViewIfNeeded === 'function') {
+        if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
             // @ts-ignore
             el.scrollIntoViewIfNeeded(centerIfNeeded);
         }

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

@@ -5,35 +5,58 @@ const react_1 = require("react");
 const utils_1 = require("../../../core/utils");
 const RECENT_SEARCHES_KEY = 'recentSearches';
 const RECENT_SEARCHES_LIMIT = 5;
-function getRecentSearches() {
-    if (!(0, utils_1.isBrowser)())
-        return [];
-    const recentSearchesStr = window.localStorage.getItem(RECENT_SEARCHES_KEY);
-    if (!recentSearchesStr)
-        return [];
-    return JSON.parse(recentSearchesStr);
-}
-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);
-    if (isAdd)
-        recentSearches.unshift(value);
-    localStorage === null || localStorage === void 0 ? void 0 : localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(recentSearches.slice(0, RECENT_SEARCHES_LIMIT)));
-    return recentSearches;
-}
+const createRecentSearchesStore = () => {
+    const subscribers = new Set();
+    let cachedSnapshot;
+    const getSnapshot = () => {
+        if (!(0, utils_1.isBrowser)())
+            return [];
+        if (cachedSnapshot)
+            return cachedSnapshot;
+        try {
+            const stored = localStorage.getItem(RECENT_SEARCHES_KEY);
+            cachedSnapshot = stored ? JSON.parse(stored) : [];
+            return cachedSnapshot;
+        }
+        catch (e) {
+            cachedSnapshot = [];
+            return cachedSnapshot;
+        }
+    };
+    const updateItems = (value, isAdd) => {
+        if (!(0, utils_1.isBrowser)())
+            return;
+        const currentItems = getSnapshot();
+        const valueIndex = currentItems.indexOf(value);
+        if (valueIndex !== -1) {
+            currentItems.splice(valueIndex, 1);
+        }
+        if (isAdd) {
+            currentItems.unshift(value);
+        }
+        const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
+        localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(limitedItems));
+        cachedSnapshot = limitedItems;
+        subscribers.forEach((callback) => callback());
+    };
+    const subscribe = (callback) => {
+        subscribers.add(callback);
+        return () => subscribers.delete(callback);
+    };
+    return {
+        getSnapshot,
+        subscribe,
+        updateItems,
+    };
+};
+const recentSearchesStore = createRecentSearchesStore();
 const useRecentSearches = () => {
-    const [items, setItems] = (0, react_1.useState)(getRecentSearches());
+    const items = (0, react_1.useSyncExternalStore)(recentSearchesStore.subscribe, recentSearchesStore.getSnapshot, () => []);
     const addSearchHistoryItem = (0, react_1.useCallback)((value) => {
-        setItems(updateRecentSearches(value, true));
+        recentSearchesStore.updateItems(value, true);
     }, []);
     const removeSearchHistoryItem = (0, react_1.useCallback)((value) => {
-        setItems(updateRecentSearches(value, false));
+        recentSearchesStore.updateItems(value, false);
     }, []);
     return { items, addSearchHistoryItem, removeSearchHistoryItem };
 };

package/lib/core/hooks/use-input-key-commands.d.ts

@@ -0,0 +1,8 @@
+type Action = 'selectAll' | 'escape' | 'clear' | 'enter' | 'paste';
+type ActionHandlers = {
+    [key in `on${Capitalize<Action>}`]?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+export declare function useInputKeyCommands(actionHandlers?: ActionHandlers): {
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};