@redocly/theme 0.52.0-next.2 → 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/Catalog/Catalog.js

@@ -10,13 +10,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CounterTag_1 = require("../../components/Tags/CounterTag");
+const CatalogVirtualizedGroups_1 = require("../../components/Catalog/CatalogVirtualizedGroups");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -39,25 +38,8 @@ function Catalog(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
-                    react_1.default.createElement(CatalogSeparator, { "data-testid": "catalog-separator" },
-                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, group.items.length)),
-                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+                react_1.default.createElement(CatalogVirtualizedGroups_1.CatalogVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
-const CatalogSeparator = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-const CatalogSeparatorLabel = styled_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
-`;
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
   width: 90%;
@@ -68,12 +50,6 @@ exports.CatalogPageContent = styled_components_1.default.main `
     padding: var(--catalog-page-padding);
   }
 `;
-const CatalogCards = styled_components_1.default.div `
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-  margin: var(--catalog-cards-group-margin);
-`;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

package/lib/components/Catalog/CatalogCard.js

@@ -110,6 +110,7 @@ const CardDescription = styled_components_1.default.div `
   font-size: var(--catalog-card-description-font-size);
   font-weight: var(--catalog-card-description-font-weight);
   line-height: var(--catalog-card-description-line-height);
+  height: var(--catalog-card-description-height);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;

package/lib/components/Catalog/CatalogVirtualizedGroups.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CatalogItem, ResolvedFilter } from '../../core/types';
+export type Group = {
+    title: string;
+    items: CatalogItem[];
+};
+export type VirtualRowData = {
+    type: 'header';
+    groupTitle: string;
+    groupCount: number;
+    key: string;
+} | {
+    type: 'cardRow';
+    groupTitle: string;
+    items: CatalogItem[];
+    key: string;
+};
+export type CatalogVirtualizedGroupsProps = {
+    groups: Group[];
+    filters: (ResolvedFilter & {
+        isFilterUsed?: boolean;
+    })[];
+    filterTerm: string;
+};
+export declare function CatalogVirtualizedGroups({ groups, filters, filterTerm, }: CatalogVirtualizedGroupsProps): React.JSX.Element;

package/lib/components/Catalog/CatalogVirtualizedGroups.js

@@ -0,0 +1,183 @@
+"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.CatalogVirtualizedGroups = CatalogVirtualizedGroups;
+const react_1 = __importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
+const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
+const GAP_SIZE = 32;
+const ESTIMATED_HEADER_HEIGHT = 43;
+const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
+const CARD_MIN_WIDTH_VAR = '--catalog-card-min-width';
+function CatalogVirtualizedGroups({ groups, filters, filterTerm, }) {
+    const [isClient, setIsClient] = (0, react_1.useState)(false);
+    const [size, parentRef] = (0, hooks_1.useElementSize)({ delay: 50, detectSizes: 'width' });
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!size.width) {
+            return;
+        }
+        virtualizer.measure();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, filterTerm, size.width]);
+    const columnCount = (0, react_1.useMemo)(() => {
+        if (!size.width)
+            return 4;
+        const cardMinWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue(CARD_MIN_WIDTH_VAR), 10);
+        return Math.max(1, Math.floor((size.width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
+    }, [size.width]);
+    const flatRows = (0, react_1.useMemo)(() => {
+        if (!isClient) {
+            return groups.flatMap((group) => [
+                {
+                    type: 'header',
+                    groupTitle: group.title,
+                    groupCount: group.items.length,
+                    key: `header-${group.title}`,
+                },
+                {
+                    type: 'cardRow',
+                    groupTitle: group.title,
+                    items: group.items,
+                    key: `${group.title}-cards`,
+                },
+            ]);
+        }
+        const rows = [];
+        groups.forEach((group) => {
+            rows.push({
+                type: 'header',
+                groupTitle: group.title,
+                groupCount: group.items.length,
+                key: `header-${group.title}`,
+            });
+            const numRows = Math.ceil(group.items.length / columnCount);
+            for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+                const startIndex = rowIndex * columnCount;
+                const rowItems = group.items.slice(startIndex, startIndex + columnCount);
+                rows.push({
+                    type: 'cardRow',
+                    groupTitle: group.title,
+                    items: rowItems,
+                    key: `${group.title}-row-${rowIndex}`,
+                });
+            }
+        });
+        return rows;
+    }, [groups, columnCount, isClient]);
+    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+        count: flatRows.length,
+        estimateSize: (index) => {
+            const row = flatRows[index];
+            if (row.type === 'header')
+                return ESTIMATED_HEADER_HEIGHT;
+            return ESTIMATED_CARD_HEIGHT;
+        },
+        overscan: 5,
+    });
+    if (!isClient) {
+        return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "Catalog/CatalogVirtualizedGroups" },
+            flatRows.slice(0, 15).map((rowData) => {
+                if (rowData.type === 'header') {
+                    return (react_1.default.createElement(SSRHeaderRow, { key: rowData.key },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+                }
+                return (react_1.default.createElement(SSRRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CardWrapper, { key: item.link },
+                    react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item }))))));
+            }),
+            react_1.default.createElement(LoadingWrapper, null,
+                react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { color: "var(--catalog-description-text-color)", size: "20px" }))));
+    }
+    return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "Catalog/CatalogVirtualizedGroups" },
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                height: `${virtualizer.getTotalSize()}px`,
+            } }, virtualizer.getVirtualItems().map((virtualRow) => {
+            const rowData = flatRows[virtualRow.index];
+            if (rowData.type === 'header') {
+                return (react_1.default.createElement(HeaderRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } },
+                    react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                    react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+            }
+            return (react_1.default.createElement(GridRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: item.link, item: item })))));
+        }))));
+}
+const SSRHeaderRow = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--catalog-separator-padding);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  padding-bottom: calc(4px * 4);
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+`;
+const SSRRow = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--catalog-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-cards-group-gap, 32px);
+`;
+const HeaderRow = (0, styled_components_1.default)(SSRHeaderRow) `
+  position: absolute;
+  left: 0;
+  will-change: transform;
+`;
+const GridRow = styled_components_1.default.div `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
+  gap: var(--catalog-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  will-change: transform;
+`;
+const CardWrapper = styled_components_1.default.div `
+  flex: 1 0 var(--catalog-card-min-width);
+  max-width: 100%;
+  min-width: var(--catalog-card-min-width);
+`;
+const CatalogSeparatorLabel = styled_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
+`;
+const LoadingWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+//# sourceMappingURL=CatalogVirtualizedGroups.js.map

package/lib/components/Catalog/variables.js

@@ -47,6 +47,7 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog card
     */
   --catalog-card-min-height: 194px;
+  --catalog-card-min-width: 260px;
   --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
@@ -60,6 +61,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-border-color-hover: var(--border-color-primary);
   --catalog-card-border-radius: var(--border-radius-xxl);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-cards-group-gap: var(--spacing-xl);
 
   /**
     * @tokens Catalog card title
@@ -79,6 +81,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-description-font-size: var(--font-size-base);
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
+  --catalog-card-description-height: 62px;
 
   --catalog-card-content-gap: var(--spacing-xxs);
 

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/Menu/MenuItem.js

@@ -62,7 +62,7 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link' },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
         chevron,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,

package/lib/components/Navbar/NavbarItem.js

@@ -59,7 +59,10 @@ function NavbarItem({ navItem, className }) {
         const groupItemsComponents = groupItems.map((item, index) => {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)));
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey },
+                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
+                item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
         return (react_1.default.createElement("div", { "data-component-name": "Navbar/NavbarItem" },
             react_1.default.createElement(NavbarMenuItemDropdown, { trigger: itemContent, triggerEvent: "hover" },

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/SearchAiMessage.js

@@ -24,9 +24,11 @@ function SearchAiMessage({ role, content, isThinking, resources, className, }) {
                 react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
                 !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
                     react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                        resources.length,
+                        translate('search.ai.resourcesFound.basedOn', 'Based on'),
                         " ",
-                        translate('search.ai.resourcesFound', 'resources found')),
+                        resources.length,
+                        ' ',
+                        translate('search.ai.resourcesFound.resources', 'resources')),
                     react_1.default.createElement(ResourceTagsWrapper, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
                         react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))))) : (content),
             isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
@@ -93,7 +95,6 @@ const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;
     overflow: hidden;
-    white-space: nowrap;
     display: inline-block;
   }
   svg {
@@ -103,8 +104,8 @@ const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
   }
   > div {
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    word-break: break-word;
+    white-space: normal;
     max-width: 100%;
   }
 `;

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;
-                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, 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