@redocly/theme 0.59.0-next.2 → 0.59.0-rc.1

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, useRef, forwardRef } from 'react';
+import React, { cloneElement, useRef } from 'react';
 import styled from 'styled-components';
 
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement, JSX } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -32,89 +32,84 @@ export type DropdownProps = PropsWithChildren<{
   onClose?: () => void;
 }>;
 
-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}
+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}
       >
-        {dropdownTrigger}
-
-        <ChildrenWrapper
-          placement={placement}
-          alignment={alignment}
-          isOpen={isOpen}
-          onClick={closeOnClick ? handleChildClick : undefined}
-        >
-          {children}
-        </ChildrenWrapper>
-      </DropdownWrapper>
-    );
-  },
-);
+        {children}
+      </ChildrenWrapper>
+    </DropdownWrapper>
+  );
+}
 
 const DropdownWrapper = styled.div`
   --button-gap: var(--spacing-xxs);

package/src/components/Menu/MenuItem.tsx

@@ -82,7 +82,6 @@ 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/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx

@@ -0,0 +1,9 @@
+// interface AdditionalOverviewInfoProps {
+//   info: any;
+// }
+
+// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
+//   return null;
+// }
+
+export const AdditionalOverviewInfo: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx

@@ -0,0 +1 @@
+export const AfterOpenApiDescription: any = null;

package/src/components/Search/SearchAiConversationInput.tsx

@@ -13,7 +13,6 @@ type SearchAiConversationInputProps = {
   isGeneratingResponse: boolean;
   placeholder?: string;
   className?: string;
-  disabled?: boolean;
 };
 
 export function SearchAiConversationInput({
@@ -21,7 +20,6 @@ export function SearchAiConversationInput({
   onMessageSent,
   className,
   placeholder,
-  disabled,
 }: SearchAiConversationInputProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -38,8 +36,6 @@ export function SearchAiConversationInput({
   }, [isGeneratingResponse]);
 
   const handleSendMessage = () => {
-    if (disabled) return;
-
     setQuery('');
     onMessageSent(query);
   };
@@ -50,7 +46,7 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
+  const isDisabled = isGeneratingResponse || query.trim().length === 0;
 
   return (
     <SearchAiConversationInputWrapper
@@ -66,7 +62,7 @@ export function SearchAiConversationInput({
         onChange={(e) => setQuery(e.target.value)}
         onKeyUp={handleOnKeyUp}
         value={query}
-        disabled={disabled || isGeneratingResponse}
+        disabled={isGeneratingResponse}
         maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
       />
 
@@ -115,10 +111,6 @@ 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);
   }
@@ -134,8 +126,6 @@ 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/SearchDialog.tsx

@@ -48,7 +48,6 @@ export function SearchDialog({
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  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 {
@@ -63,7 +62,7 @@ export function SearchDialog({
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
+  } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -73,7 +72,7 @@ export function SearchDialog({
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter }, searchSessionId);
+  const aiSearch = useAiSearch({ filter });
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -151,14 +150,13 @@ export function SearchDialog({
               totalResults: results.length.toString(),
               index: index.toString(),
               searchEngine: mode,
-              searchSessionId,
             });
             onClose();
           }}
         />
       );
     },
-    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId],
+    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode],
   );
 
   const showLoadMore = useCallback(
@@ -391,7 +389,6 @@ export function SearchDialog({
                         telemetry.sendSearchRecentClickedMessage({
                           query,
                           index: index.toString(),
-                          searchSessionId,
                         });
                         setQuery(query);
                         focusSearchInput();

package/src/components/Search/variables.ts

@@ -171,7 +171,6 @@ 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);
@@ -233,7 +232,6 @@ 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);
@@ -243,12 +241,10 @@ 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
@@ -281,7 +277,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-xxs);
+  --search-ai-suggestion-item-gap: var(--spacing-xs);
 
   --search-ai-suggestions-title-text-color: var(--text-color-description);
   --search-ai-suggestions-title-font-size: var(--font-size-base);

package/src/components/Select/variables.ts

@@ -10,7 +10,7 @@ export const select = css`
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-  
+
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -38,7 +38,7 @@ export const select = css`
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End

package/src/components/Tag/Tag.tsx

@@ -229,23 +229,23 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
   color: var(--tag-color);
   background-color: ${({ variant }) =>
     variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
-  ${({ borderless, variant }) =>
+  ${({ borderless }) =>
     borderless
       ? ''
-      : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
+      : `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
   border-radius: var(--tag-border-radius);
 
   svg {
     width: var(--tag-icon-width);
     height: var(--tag-icon-height);
   }
-
+  /* 
   &:hover {
     background-color: ${({ variant }) =>
-      variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
+    variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
     border-color: ${({ variant }) =>
-      variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
-  }
+    variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
+  } */
 
   &:focus-visible {
     outline: 1px solid var(--tag-border-color-focused);

package/src/core/constants/search.ts

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