@redocly/theme 0.52.0-next.3 → 0.52.0-next.4

package/lib/components/Button/Button.d.ts

@@ -15,6 +15,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     icon?: JSX.Element;
     iconPosition?: 'left' | 'right';
     title?: string;
+    tabIndex?: number;
     onClick?: (e?: any) => void;
     type?: 'button' | 'submit' | 'reset';
 }

package/lib/components/Button/Button.js

@@ -154,7 +154,8 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
     `}
 `;
 const ButtonComponent = (props) => {
-    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: props.to ? -1 : undefined }),
+    const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
+    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: tabIndex }),
         props.icon && props.iconPosition !== 'right' && props.icon,
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));

package/lib/components/Dropdown/Dropdown.js

@@ -56,7 +56,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     };
     (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
     const triggerChild = react_1.default.Children.only(trigger);
-    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
+    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
         react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));

package/lib/components/Link/Link.js

@@ -46,9 +46,9 @@ function Link(props) {
         return React.createElement(LinkComponent, Object.assign({}, props));
     }
     else {
-        const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4 } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external"]);
+        const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4, innerRef } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external", "innerRef"]);
         // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-        return React.createElement(react_router_dom_1.Link, Object.assign({ ref: filteredProps.innerRef }, filteredProps));
+        return React.createElement(react_router_dom_1.Link, Object.assign({ ref: innerRef }, filteredProps));
     }
 }
 //# sourceMappingURL=Link.js.map

package/lib/components/Search/FilterFields/SearchFilterFieldTags.js

@@ -11,11 +11,18 @@ function SearchFilterFieldTags({ className, facet, selectedValues, onChange, })
     return (react_1.default.createElement(FilterTagsWrapper, { "data-component-name": "Search/FilterFields/SearchFilterFieldTags", className: className }, facet.values.map((facetCount, index) => {
         const { value, count, isCounterVisible } = facetCount;
         const active = selectedValues.includes(value);
-        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, color: value, onClick: () => {
-                const values = active
-                    ? selectedValues.filter((item) => item !== value)
-                    : [...selectedValues, value];
-                onChange(values);
+        const updateSelectedValues = () => {
+            const values = active
+                ? selectedValues.filter((item) => item !== value)
+                : [...selectedValues, value];
+            onChange(values);
+        };
+        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: value, onClick: () => {
+                updateSelectedValues();
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    updateSelectedValues();
+                }
             }, active: active, borderless: true },
             value,
             " ",

package/lib/components/Search/SearchDialog.js

@@ -46,6 +46,7 @@ const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 const SearchAiDialog_1 = require("../../components/Search/SearchAiDialog");
 const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
+const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 function SearchDialog({ onClose, className }) {
@@ -59,14 +60,25 @@ function SearchDialog({ onClose, className }) {
     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 aiSearch = useAiSearch({ filter });
+    const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
+    const aiQueryRef = (0, react_1.useRef)(null);
+    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 focusSearchInput = () => {
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    };
     (0, react_1.useEffect)(() => {
         if (mode === 'ai-dialog' && aiSearch.isGeneratingResponse) {
             setQuery('');
         }
     }, [mode, aiSearch.isGeneratingResponse, setQuery]);
+    (0, react_1.useEffect)(focusSearchInput, []);
     const handleOverlayClick = (event) => {
         var _a;
         const target = event.target;
@@ -76,7 +88,7 @@ function SearchDialog({ onClose, className }) {
             onClose();
         }
     };
-    const mapItem = (item, index, results) => {
+    const mapItem = (item, index, results, innerRef) => {
         var _a;
         let itemProduct;
         if (!product && item.document.product) {
@@ -86,7 +98,7 @@ function SearchDialog({ onClose, className }) {
                 ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
                 : undefined;
         }
-        return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, onClick: () => {
+        return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
                 otelTelemetry.send('search.result.clicked', {
                     query,
                     url: item.document.url,
@@ -123,12 +135,17 @@ function SearchDialog({ onClose, className }) {
                     product.name,
                     react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
                 mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, onSubmit: showAiSearchButton
-                            ? () => {
-                                setMode('ai-dialog');
-                                aiSearch.askQuestion(query);
+                    react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, inputRef: searchInputRef, onSubmit: () => {
+                            var _a;
+                            if (isSearchLoading)
+                                return;
+                            if (showAiSearchButton && aiQueryRef.current) {
+                                aiQueryRef.current.focus();
                             }
-                            : undefined, "data-translation-key": "search.label" }),
+                            else {
+                                (_a = firstSearchResultRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            }
+                        }, "data-translation-key": "search.label" }),
                     showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
                         showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { gradient: true }), onClick: () => {
                                 setMode('ai-dialog');
@@ -140,9 +157,12 @@ function SearchDialog({ onClose, className }) {
                     react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
                             setMode('search');
                             aiSearch.clearConversation();
-                        }, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, translate('search.ai.backToSearch', 'Back to search')),
-                    react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => aiSearch.clearConversation(), icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation'))))),
+                            focusSearchInput();
+                        }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, translate('search.ai.backToSearch', 'Back to search')),
+                    react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => aiSearch.clearConversation(), tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation'))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
                 react_1.default.createElement(SearchDialogBodyMainView, null,
                     react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
                     showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
@@ -150,27 +170,48 @@ function SearchDialog({ onClose, className }) {
                             if (query.trim()) {
                                 aiSearch.askQuestion(query);
                             }
-                        }, tabIndex: 0, role: "option", "aria-selected": "true" },
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                setMode('ai-dialog');
+                                if (query.trim()) {
+                                    aiSearch.askQuestion(query);
+                                }
+                            }
+                        }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
                         react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
                         react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query),
                         react_1.default.createElement(Typography_1.Typography, null,
                             "- ",
                             translate('search.ai.label', 'Ask AI assistant')),
-                        react_1.default.createElement(ReturnKey, null, "\u23CE"))),
-                    showResults ? (items && Object.keys(items).some((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) ? (Object.keys(items).map((key) => {
-                        var _a, _b, _c;
-                        return ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.Fragment, { key: key },
-                            react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key), (_b = items[key]) === null || _b === void 0 ? void 0 :
-                            _b.map(mapItem),
-                            showLoadMore(key, ((_c = items[key]) === null || _c === void 0 ? void 0 : _c.length) || 0) && (react_1.default.createElement(SearchGroupFooter, { "data-translation-key": "search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('search.showMore', 'Show more'))))) : null;
+                        react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" }))),
+                    showResults ? (searchKeysWithResults.length ? (searchKeysWithResults.map((key, searchGroupKeyIdx) => {
+                        const searchResultItems = items[key];
+                        if (searchResultItems === null || searchResultItems === void 0 ? void 0 : searchResultItems.length) {
+                            return (react_1.default.createElement(react_1.Fragment, { key: key },
+                                react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key),
+                                searchResultItems.map((item, idx, resultsArr) => mapItem(item, idx, resultsArr, searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined)),
+                                showLoadMore(key, searchResultItems.length || 0) && (react_1.default.createElement(SearchGroupFooter, { tabIndex: 0, "data-translation-key": "search.showMore", onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            setLoadMore({
+                                                groupKey: key,
+                                                offset: searchResultItems.length || 0,
+                                            });
+                                        }
+                                    }, onClick: () => setLoadMore({
+                                        groupKey: key,
+                                        offset: searchResultItems.length || 0,
+                                    }) }, translate('search.showMore', 'Show more')))));
+                        }
+                        return null;
                     })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
                         react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
                         translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
                         react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
-                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
-                advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion }))),
+                        react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query) => {
+                                setQuery(query);
+                                focusSearchInput();
+                            } }),
+                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion }))),
             react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
@@ -243,7 +284,7 @@ const AiDialogHeaderWrapper = styled_components_1.default.div `
 `;
 const SearchDialogBody = styled_components_1.default.div `
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   flex: 1;
   min-height: 0;
   overflow: hidden;
@@ -354,22 +395,32 @@ const SearchWithAI = styled_components_1.default.div `
   text-decoration: none;
   white-space: normal;
   outline: none;
-  border: none;
+  border-top: 1px solid var(--search-item-border-color);
+  border-bottom: 1px solid var(--search-item-border-color);
 
   transition: all 0.3s ease;
 
+  ${ReturnKeyIcon_1.ReturnKeyIcon} {
+    opacity: 0;
+  }
+
   &:focus,
   &:hover {
     color: var(--search-item-text-color-hover);
     background-color: var(--search-item-bg-color-hover);
+
+    ${ReturnKeyIcon_1.ReturnKeyIcon} {
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    border-top: 1px solid var(--search-item-border-color-focused);
+    border-bottom: 1px solid var(--search-item-border-color-focused);
   }
 
   & > :first-child {
     margin-right: var(--spacing-xs);
   }
 `;
-const ReturnKey = (0, styled_components_1.default)(Typography_1.Typography) `
-  color: var(--search-item-text-color);
-  margin-left: auto;
-`;
 //# sourceMappingURL=SearchDialog.js.map

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

@@ -7,7 +7,7 @@ export type SearchInputProps = {
     isLoading: boolean;
     showReturnButton?: boolean;
     onReturn?: () => void;
-    onSubmit?: () => void;
+    onSubmit?: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
     className?: string;
 };
-export declare function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, onReturn, onSubmit, className, }: SearchInputProps): JSX.Element;
+export declare function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }: SearchInputProps): JSX.Element;

package/lib/components/Search/SearchInput.js

@@ -12,7 +12,7 @@ const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../core/hooks");
 const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
-function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, onReturn, onSubmit, className, }) {
+function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const stopPropagation = (event) => event.stopPropagation();
@@ -28,13 +28,13 @@ function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton
             return;
         }
         if (e.key === 'Enter') {
-            onSubmit();
+            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, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation, onKeyUp: handleOnKeyUp }),
-        !!value && (react_1.default.createElement(ResetButton, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, null) }))));
+        react_1.default.createElement(SearchInputField, { value: value, ref: inputRef, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation, onKeyUp: handleOnKeyUp }),
+        !!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 `
   display: flex;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SearchItemData } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;
@@ -10,6 +11,7 @@ export type SearchItemProps = {
         icon?: string;
     };
     className?: string;
+    innerRef?: React.ForwardedRef<HTMLAnchorElement>;
 };
-export declare function SearchItem({ onClick, item, className, product }: SearchItemProps): JSX.Element;
+export declare function SearchItem({ onClick, item, className, product, innerRef, }: SearchItemProps): JSX.Element;
 export {};

package/lib/components/Search/SearchItem.js

@@ -35,7 +35,8 @@ const Image_1 = require("../../components/Image/Image");
 const SearchHighlight_1 = require("../../components/Search/SearchHighlight");
 const Badge_1 = require("../../components/Badge/Badge");
 const utils_1 = require("../../core/utils");
-function SearchItem({ onClick, item, className, product }) {
+const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
+function SearchItem({ onClick, item, className, product, innerRef, }) {
     var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
@@ -47,33 +48,45 @@ function SearchItem({ onClick, item, className, product }) {
     const { document, highlight } = item;
     const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
     const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
-    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
-        react_1.default.createElement(SearchItemHeader, null,
-            product && (react_1.default.createElement(SearchItemProductTag, { "data-testid": "search-item-product-tag" },
-                react_1.default.createElement(Image_1.Image, { src: product.icon }),
-                product.name)),
-            document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
-                react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
-                highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
-            react_1.default.createElement(SearchItemTitleWrapper, null,
-                react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
-                document.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
-                document.badges
-                    ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
-                    : null),
-            react_1.default.createElement(SearchItemDescription, null, highlight.text ? (0, SearchHighlight_1.searchHighlight)(highlight.text) : (0, utils_1.trimText)(document.text))),
-        parameter ? (react_1.default.createElement(SearchItemPlace, null,
-            react_1.default.createElement("div", null,
-                (0, SearchHighlight_1.searchHighlight)(parameter.place),
-                ` → `,
-                ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (0, SearchHighlight_1.searchHighlight)((_c = parameter.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : '',
-                (0, SearchHighlight_1.searchHighlight)(parameter.name)),
-            react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
-            ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
-            : (_d = document.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))));
+    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
+            ref.current = el;
+            if (!innerRef)
+                return;
+            if (typeof innerRef === 'function') {
+                innerRef(el);
+            }
+            else {
+                innerRef.current = el;
+            }
+        }, "data-component-name": "Search/SearchItem" },
+        react_1.default.createElement(SearchItemContent, null,
+            react_1.default.createElement(SearchItemHeader, null,
+                product && (react_1.default.createElement(SearchItemProductTag, { "data-testid": "search-item-product-tag" },
+                    react_1.default.createElement(Image_1.Image, { src: product.icon }),
+                    product.name)),
+                document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
+                    react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
+                    highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
+                react_1.default.createElement(SearchItemTitleWrapper, null,
+                    react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
+                    document.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
+                    document.badges
+                        ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
+                        : null),
+                react_1.default.createElement(SearchItemDescription, null, highlight.text ? (0, SearchHighlight_1.searchHighlight)(highlight.text) : (0, utils_1.trimText)(document.text))),
+            parameter ? (react_1.default.createElement(SearchItemPlace, null,
+                react_1.default.createElement("div", null,
+                    (0, SearchHighlight_1.searchHighlight)(parameter.place),
+                    ` → `,
+                    ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (0, SearchHighlight_1.searchHighlight)((_c = parameter.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : '',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.name)),
+                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
+                ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
+                : (_d = document.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))),
+        react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));
 }
 const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
-  display: block;
+  display: flex;
   padding: var(--search-item-padding);
   color: var(--search-item-text-color);
   background-color: var(--search-item-bg-color);
@@ -84,17 +97,29 @@ const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
 
-  &:hover {
+  ${ReturnKeyIcon_1.ReturnKeyIcon} {
+    align-self: center;
+    opacity: 0;
+  }
+
+  &:hover,
+  &:focus {
     color: var(--search-item-text-color-hover);
     background-color: var(--search-item-bg-color-hover);
+
+    ${ReturnKeyIcon_1.ReturnKeyIcon} {
+      opacity: 1;
+    }
   }
 
   &:focus {
-    background-color: var(--search-item-bg-color-active);
     border-top: 1px solid var(--search-item-border-color-focused);
     border-bottom: 1px solid var(--search-item-border-color-focused);
   }
 `;
+const SearchItemContent = styled_components_1.default.section `
+  flex: 1 1 auto;
+`;
 const SearchItemHeader = styled_components_1.default.div `
   position: relative;
 `;

package/lib/components/Search/variables.js

@@ -52,7 +52,6 @@ exports.search = (0, styled_components_1.css) `
   --search-item-path-text-color: var(--text-color-description); // @presenter Color
   --search-item-bg-color: transparent; // @presenter Color
   --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
-  --search-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
   --search-item-border-color: transparent; // @presenter Color
   --search-item-padding: var(--spacing-sm) var(--spacing-lg);

package/lib/components/Select/Select.js

@@ -51,6 +51,7 @@ function Select(props) {
     };
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(getSelectedOptionsFromPropsValue());
     const selectRef = (0, react_1.useRef)(null);
+    const selectInputRef = (0, react_1.useRef)(null);
     const [searchValue, setSearchValue] = (0, react_1.useState)(null);
     const [dropdownActive, setDropdownActive] = (0, react_1.useState)(false);
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
@@ -86,6 +87,7 @@ function Select(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [searchValue]);
     const selectHandler = (selectedOption) => {
+        var _a;
         const newSelectedOptions = multiple
             ? isSelected(selectedOption)
                 ? selectedOptions.filter((option) => option.value !== selectedOption.value)
@@ -105,6 +107,7 @@ function Select(props) {
         if (!multiple) {
             setStickyInputValue('');
         }
+        (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const searchHandler = (e) => {
         const targetValue = e.target.value;
@@ -147,11 +150,11 @@ function Select(props) {
     const isSelected = (option) => {
         return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
     };
-    const renderDefaultInput = () => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+    const renderDefaultInput = (inputRef) => {
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
     };
     return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className }),
-        react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
+        react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
             react_1.default.createElement(SelectDropdownMenu, { footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&

package/lib/components/Select/SelectInput.d.ts

@@ -12,6 +12,7 @@ type SelectInputProps<T> = {
     multiple?: boolean;
     searchable?: boolean;
     clearable?: boolean;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
     clearHandler?: (value?: any) => void;
     inputBlurHandler?: (e?: any) => void;
     inputFocusHandler?: (e?: any) => void;

package/lib/components/Select/SelectInput.js

@@ -43,7 +43,6 @@ function SelectInput(props) {
     };
     const onKeyDownHandler = (e) => {
         var _a;
-        e.stopPropagation();
         if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
             clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(selectedOptions[selectedOptions.length - 1]);
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -72,7 +71,19 @@ function SelectInput(props) {
     const selectInput = (react_1.default.createElement(SelectInternalInput, { value: searchValue ||
             (!multiple && !stickyValue && selectedOptions.length
                 ? selectedOptions[0].label || selectedOptions[0].value
-                : ''), placeholder: searchValue || (multiple && selectedOptions.length) ? '' : stickyValue || placeholder, onChange: onChangeHandler, onKeyDown: onKeyDownHandler, onBlur: onBlurHandler, ref: inputRef, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%' }));
+                : ''), placeholder: searchValue || (multiple && selectedOptions.length) ? '' : stickyValue || placeholder, onChange: onChangeHandler, onKeyDown: onKeyDownHandler, onBlur: onBlurHandler, ref: (input) => {
+            if (!input)
+                return;
+            inputRef.current = input;
+            if (!props.inputRef)
+                return;
+            if (typeof props.inputRef === 'function') {
+                props.inputRef(input);
+            }
+            else {
+                props.inputRef.current = input;
+            }
+        }, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%' }));
     const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler }),

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

@@ -17,9 +17,11 @@ export type TagProps = {
     size?: string;
     icon?: React.ReactNode;
     active?: boolean;
+    tabIndex?: number;
     onClick?: (event: React.MouseEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
     onClose?: (event: React.MouseEvent) => void;
 };
-export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -21,8 +21,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
-    return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
+    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
+    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
         react_1.default.createElement(exports.ContentWrapper, null, children),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {

package/lib/components/UserMenu/UserMenu.js

@@ -38,7 +38,7 @@ function UserMenu({ className }) {
         react_1.default.createElement(LogoutMenuItem_1.LogoutMenuItem, { key: "logout" }),
     ];
     return (react_1.default.createElement(UserMenuWrapper, { "data-component-name": "UserMenu/UserMenu" },
-        react_1.default.createElement(StyledDropdown, { className: className, alignment: "end", trigger: react_1.default.createElement(UserMenuTrigger, { role: "button" },
+        react_1.default.createElement(StyledDropdown, { className: className, alignment: "end", trigger: react_1.default.createElement(UserMenuTrigger, { role: "button", tabIndex: 0 },
                 react_1.default.createElement(UserAvatar_1.UserAvatar, { picture: userData.picture })) },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items))));
 }

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

@@ -167,7 +167,6 @@ function useEvent(callback) {
     (0, react_1.useEffect)(() => {
         ref.current = callback;
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     return (0, react_1.useCallback)(((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }), []);
 }
 //# sourceMappingURL=use-collapse.js.map

package/lib/core/hooks/use-dialog-hotkeys.js

@@ -22,12 +22,11 @@ function useDialogHotKeys(ref, onClose) {
         }
     };
     const onFocusableElementsHandler = () => {
-        var _a, _b;
+        var _a;
         const focusableElements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, [href], [tabindex]:not([tabindex="-1"])');
         if (focusableElements && focusableElements.length > 0) {
             firstFocusableRef.current = focusableElements[0];
             lastFocusableRef.current = focusableElements[focusableElements.length - 1];
-            (_b = firstFocusableRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     };
     (0, react_1.useEffect)(() => {

package/lib/icons/ReturnKeyIcon/ReturnKeyIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ReturnKeyIcon: import("styled-components").StyledComponent<"span", any, import("../../components/Typography/Typography").TypographyProps & {
+    'data-component-name': string;
+}, "data-component-name">;