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

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, useRef } from 'react';
+import React, { cloneElement, useRef, forwardRef } from 'react';
 import styled from 'styled-components';
 
-import type { PropsWithChildren, ReactElement, JSX } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -32,84 +32,89 @@ export type DropdownProps = PropsWithChildren<{
   onClose?: () => void;
 }>;
 
-export function Dropdown({
-  children,
-  className,
-  active,
-  trigger,
-  triggerEvent = 'click',
-  closeOnClick = true,
-  withArrow,
-  dataAttributes,
-  placement,
-  alignment,
-  onClick,
-  onClose,
-}: DropdownProps): JSX.Element {
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    onClose?.();
-  };
-
-  const handleChildClick = () => {
-    handleClose();
-  };
-
-  const handleToggle = (event: React.UIEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      handleToggle(event);
-    }
-  };
-
-  useOutsideClick(dropdownRef, handleClose);
-
-  const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
-
-  const dropdownTrigger = cloneElement(triggerChild, {
-    onClick: triggerEvent === 'click' ? handleToggle : undefined,
-    icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
-    ...(withArrow ? { iconPosition: 'right' } : {}),
-    ...triggerChild.props,
-    onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
-  });
-
-  return (
-    <DropdownWrapper
-      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}
-
-      <ChildrenWrapper
-        placement={placement}
-        alignment={alignment}
-        isOpen={isOpen}
-        onClick={closeOnClick ? handleChildClick : undefined}
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      children,
+      className,
+      active,
+      trigger,
+      triggerEvent = 'click',
+      closeOnClick = true,
+      withArrow,
+      dataAttributes,
+      placement,
+      alignment,
+      onClick,
+      onClose,
+    },
+    ref,
+  ) => {
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+      onClose?.();
+    };
+
+    const handleChildClick = () => {
+      handleClose();
+    };
+
+    const handleToggle = (event: React.UIEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      setIsOpen(!isOpen);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleToggle(event);
+      }
+    };
+
+    useOutsideClick((ref as React.RefObject<HTMLElement | null>) || dropdownRef, handleClose);
+
+    const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
+
+    const dropdownTrigger = cloneElement(triggerChild, {
+      onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
+      ...(withArrow ? { iconPosition: 'right' } : {}),
+      ...triggerChild.props,
+      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
+    });
+
+    return (
+      <DropdownWrapper
+        data-component-name="Dropdown/Dropdown"
+        data-testid="dropdown"
+        {...dataAttributes}
+        className={className}
+        ref={ref || dropdownRef}
+        onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
+        onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
+        onClick={onClick}
       >
-        {children}
-      </ChildrenWrapper>
-    </DropdownWrapper>
-  );
-}
+        {dropdownTrigger}
+
+        <ChildrenWrapper
+          placement={placement}
+          alignment={alignment}
+          isOpen={isOpen}
+          onClick={closeOnClick ? handleChildClick : undefined}
+        >
+          {children}
+        </ChildrenWrapper>
+      </DropdownWrapper>
+    );
+  },
+);
 
 const DropdownWrapper = styled.div`
   --button-gap: var(--spacing-xxs);

package/src/components/Filter/FilterInput.tsx

@@ -9,10 +9,11 @@ import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 export type FilterInputProps = {
   value: string;
   onChange: (newValue: string) => void;
+  dataTestId?: string;
 };
 
 export function FilterInput(props: FilterInputProps): JSX.Element {
-  const { value: initialValue, onChange } = props;
+  const { value: initialValue, onChange, dataTestId } = props;
 
   const [value, setValue] = useState(initialValue);
 
@@ -30,7 +31,7 @@ export function FilterInput(props: FilterInputProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <InputWrapper data-component-name="Filter/FilterInput">
+    <InputWrapper data-component-name="Filter/FilterInput" data-testid={dataTestId}>
       <InputIcon />
       <Input
         value={value}

package/src/components/Filter/FilterOptions.tsx

@@ -16,4 +16,6 @@ const FilterOptionsComponent = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--filter-options-gap);
+  max-height: var(--filter-options-max-height);
+  overflow-y: scroll;
 `;

package/src/components/Filter/variables.ts

@@ -15,6 +15,7 @@ export const filter = css`
   --filter-options-padding-vertical: 0;
   --filter-options-padding-horizontal: 0;
   --filter-options-gap: var(--spacing-sm);
+  --filter-options-max-height: 350px;
 
   --filter-option-font-size: var(--font-size-base);
   --filter-option-gap: var(--spacing-xs);
@@ -25,12 +26,14 @@ export const filter = css`
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 
-  --filter-content-header-padding-vertical: 5px;
-  --filter-content-header-padding-horizontal: 0;
+  --filter-content-header-padding-vertical: var(--spacing-xs) var(--spacing-sm);
+  --filter-content-header-padding-horizontal: var(--spacing-base);
 
-  --filter-content-title-font-size: var(--font-size-base);
-  --filter-content-title-line-height: var(--line-height-base);
+  --filter-content-title-font-size: var(--font-size-lg);
+  --filter-content-title-line-height: var(--line-height-lg);
   --filter-content-title-font-weight: var(--font-weight-semibold);
+
+  --filter-content-search-padding: 0 var(--spacing-xs) var(--spacing-sm);
   
   --filter-content-padding-vertical: var(--spacing-sm);
   --filter-content-padding-horizontal: var(--spacing-base);

package/src/components/Menu/MenuItem.tsx

@@ -82,6 +82,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       role={item.link ? 'none' : 'link'}
       tabIndex={!item.link ? 0 : undefined}
       data-testid="menu-item-label"
+      data-active={item.active}
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
       <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />

package/src/components/Search/SearchAiConversationInput.tsx

@@ -13,6 +13,7 @@ type SearchAiConversationInputProps = {
   isGeneratingResponse: boolean;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
 };
 
 export function SearchAiConversationInput({
@@ -20,6 +21,7 @@ export function SearchAiConversationInput({
   onMessageSent,
   className,
   placeholder,
+  disabled,
 }: SearchAiConversationInputProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -36,6 +38,8 @@ export function SearchAiConversationInput({
   }, [isGeneratingResponse]);
 
   const handleSendMessage = () => {
+    if (disabled) return;
+
     setQuery('');
     onMessageSent(query);
   };
@@ -46,7 +50,7 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = isGeneratingResponse || query.trim().length === 0;
+  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
 
   return (
     <SearchAiConversationInputWrapper
@@ -62,7 +66,7 @@ export function SearchAiConversationInput({
         onChange={(e) => setQuery(e.target.value)}
         onKeyUp={handleOnKeyUp}
         value={query}
-        disabled={isGeneratingResponse}
+        disabled={disabled || isGeneratingResponse}
         maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
       />
 
@@ -111,6 +115,10 @@ const ConversationInput = styled.input`
     border-color: var(--search-ai-conversation-input-border-color-focus);
   }
 
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-bg-color-disabled);
+  }
+
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
@@ -126,6 +134,8 @@ const SendButton = styled(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
+  padding: var(--search-ai-conversation-input-send-button-padding);
 
   &:hover {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);

package/src/components/Search/SearchAiDialog.tsx

@@ -43,12 +43,12 @@ export function SearchAiDialog({
   setConversation,
 }: SearchAiDialogProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
-  const { search } = useThemeConfig();
+  const { aiAssistant } = useThemeConfig();
   const { translate } = useTranslate();
 
   const conversationEndRef = React.useRef<HTMLDivElement>(null);
 
-  const suggestions = search?.ai?.suggestions;
+  const suggestions = aiAssistant?.suggestions;
 
   const placeholder = isGeneratingResponse
     ? translate('search.ai.generatingResponse', 'Generating response...')

package/src/components/Search/SearchAiResponse.tsx

@@ -34,7 +34,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
   const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
 
-  const { search } = useThemeConfig();
+  const { aiAssistant } = useThemeConfig();
   const { useTranslate } = useThemeHooks();
 
   const { translate } = useTranslate();
@@ -42,7 +42,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
 
   let responseContainer = null;
 
-  const suggestions = search?.ai?.suggestions;
+  const suggestions = aiAssistant?.suggestions;
 
   const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
   if (hasPendingOrReceivedResponse) {

package/src/components/Search/SearchDialog.tsx

@@ -34,16 +34,22 @@ import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/Ai
 export type SearchDialogProps = {
   onClose: () => void;
   className?: string;
+  initialMode?: 'search' | 'ai-dialog';
 };
 
-export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
+export function SearchDialog({
+  onClose,
+  className,
+  initialMode = 'search',
+}: SearchDialogProps): JSX.Element {
   const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
     useThemeHooks();
   const telemetry = useTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  const [mode, setMode] = useState<'search' | 'ai-dialog'>('search');
+  const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
+  const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
   const autoSearchDisabled = mode !== 'search';
   const {
     query,
@@ -57,7 +63,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled);
+  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -67,7 +73,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter });
+  const aiSearch = useAiSearch({ filter }, searchSessionId);
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -145,13 +151,14 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               totalResults: results.length.toString(),
               index: index.toString(),
               searchEngine: mode,
+              searchSessionId,
             });
             onClose();
           }}
         />
       );
     },
-    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode],
+    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId],
   );
 
   const showLoadMore = useCallback(
@@ -384,6 +391,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                         telemetry.sendSearchRecentClickedMessage({
                           query,
                           index: index.toString(),
+                          searchSessionId,
                         });
                         setQuery(query);
                         focusSearchInput();

package/src/components/Search/variables.ts

@@ -171,6 +171,7 @@ export const search = css`
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
   --search-ai-assistant-border: 1px solid var(--border-color-primary);
+  --search-ai-assistant-message-max-width: 80%;
 
   --search-ai-resources-gap: var(--spacing-base);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
@@ -232,6 +233,7 @@ export const search = css`
   * @tokens AI Search Conversation Input
   */
   --search-ai-conversation-input-bg-color: var(--bg-color);
+  --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
   --search-ai-conversation-input-border-radius: var(--border-radius-lg);
@@ -241,10 +243,12 @@ export const search = css`
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;
+  --search-ai-conversation-input-send-button-padding: 5px;
   --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
   --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
   --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
 
   /**
   * @tokens AI Search Response
@@ -277,7 +281,7 @@ export const search = css`
 
   --search-ai-suggestions-gap: var(--spacing-sm);
   --search-ai-suggestions-margin-left: var(--spacing-xs);
-  --search-ai-suggestion-item-gap: var(--spacing-xs);
+  --search-ai-suggestion-item-gap: var(--spacing-xxs);
 
   --search-ai-suggestions-title-text-color: var(--text-color-description);
   --search-ai-suggestions-title-font-size: var(--font-size-base);

package/src/components/Tag/variables.dark.ts

@@ -55,10 +55,10 @@ export const tagDarkMode = css`
   }
 
   .tag-green {
-    --tag-color: var(--color-green-6); // @presenter Color
+    --tag-color: var(--color-green-7); // @presenter Color
     --tag-bg-color: var(--color-green-1); // @presenter Color
     --tag-border-color: var(--color-green-3); // @presenter Color
-    --tag-border-color-hover: var(--color-green-4); // @presenter Color
+    --tag-border-color-hover: var(--color-green-5); // @presenter Color
     --tag-bg-color-hover: var(--color-green-2); // @presenter Color
   }
 

package/src/core/constants/search.ts

@@ -7,10 +7,14 @@ export enum AiSearchError {
   EmptyResponse = 'empty_response',
   ErrorProcessingResponse = 'error_processing_response',
 }
-export const enum AiSearchConversationRole {
-  USER = 'user',
-  ASSISTANT = 'assistant',
-}
+
+export const AiSearchConversationRole = {
+  USER: 'user',
+  ASSISTANT: 'assistant',
+} as const;
+
+export type AiSearchConversationRole =
+  (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 
 const defaultErrorConfig: AiSearchErrorConfig = {
   headerKey: 'search.ai.error.header',