@redocly/theme 0.61.1 → 0.62.0-custom.0

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, memo, useRef, useState, useCallback } from 'react';
+import React, { memo, useEffect, useRef, useId } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX, PropsWithChildren, ReactNode } from 'react';
@@ -15,10 +15,10 @@ export type TooltipProps = {
   width?: string;
   dataTestId?: string;
   disabled?: boolean;
-  arrowPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+  arrowPosition?: 'left' | 'right' | 'center';
 };
 
-export function TooltipComponent({
+function TooltipComponent({
   children,
   isOpen,
   tip,
@@ -30,111 +30,55 @@ export function TooltipComponent({
   disabled = false,
   arrowPosition = 'center',
 }: PropsWithChildren<TooltipProps>): JSX.Element {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const tooltipWrapperRef = useRef<HTMLDivElement | null>(null);
+  const tooltipBodyRef = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const anchorName = `--tooltip${useId().replace(/:/g, '')}`;
 
-  useOutsideClick(ref, handleClose);
+  useOutsideClick(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
 
   const isControlled = isOpen !== undefined;
 
-  const updateTooltipPosition = useCallback(() => {
-    if (isOpened && ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-
-      let top = 0;
-      let left = 0;
-
-      switch (placement) {
-        case 'top':
-          top = rect.top;
-          if (arrowPosition === 'left') {
-            left = rect.left - 24;
-          } else if (arrowPosition === 'right') {
-            left = rect.right + 24;
-          } else {
-            left = rect.left + rect.width / 2;
-          }
-          break;
-        case 'bottom':
-          top = rect.bottom;
-          if (arrowPosition === 'left') {
-            left = rect.left - 24;
-          } else if (arrowPosition === 'right') {
-            left = rect.right + 24;
-          } else {
-            left = rect.left + rect.width / 2;
-          }
-          break;
-        case 'left':
-          top = rect.top + rect.height / 2;
-          left = rect.left;
-          break;
-        case 'right':
-          top = rect.top + rect.height / 2;
-          left = rect.right;
-          break;
-      }
-
-      setTooltipPosition({ top, left });
-    }
-  }, [isOpened, placement, arrowPosition]);
-
   useEffect(() => {
-    if (isOpened && ref.current) {
-      updateTooltipPosition();
-
-      const handleScroll = () => updateTooltipPosition();
-      const handleResize = () => updateTooltipPosition();
-
-      window.addEventListener('scroll', handleScroll, true);
-      window.addEventListener('resize', handleResize);
-
-      return () => {
-        window.removeEventListener('scroll', handleScroll, true);
-        window.removeEventListener('resize', handleResize);
-      };
-    }
-  }, [isOpened, placement, updateTooltipPosition]);
+    if (!isControlled) return;
 
-  useEffect(() => {
     if (isOpen && !disabled) {
       handleOpen();
     } else {
       handleClose();
     }
-  }, [isOpen, handleOpen, handleClose, disabled]);
-
-  const controllers = !isControlled &&
-    !disabled && {
-      onMouseEnter: handleOpen,
-      onMouseLeave: handleClose,
-      onClick: handleClose,
-      onFocus: handleOpen,
-      onBlur: handleClose,
-    };
+  }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
+
+  const controllers =
+    !isControlled && !disabled
+      ? {
+          onMouseEnter: handleOpen,
+          onMouseLeave: handleClose,
+          onClick: handleClose,
+          onFocus: handleOpen,
+          onBlur: handleClose,
+        }
+      : {};
 
   return (
     <TooltipWrapper
-      ref={ref}
+      ref={tooltipWrapperRef}
       {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
+      anchorName={anchorName}
     >
       {children}
       {isOpened && !disabled && (
         <Portal>
           <TooltipBody
+            ref={tooltipBodyRef}
             data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
             placement={placement}
             width={width}
             withArrow={withArrow}
             arrowPosition={arrowPosition}
-            style={{
-              position: 'fixed',
-              top: tooltipPosition.top,
-              left: tooltipPosition.left,
-            }}
+            anchorName={anchorName}
           >
             {tip}
           </TooltipBody>
@@ -148,20 +92,21 @@ export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
 const PLACEMENTS = {
   top: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    bottom: anchor(top);
     ${({ withArrow, arrowPosition }) =>
       withArrow && arrowPosition === 'left'
         ? css`
-            transform: translate(0, -100%);
-            margin-top: -10px;
+            transform: translate(-32px, -6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
           ? css`
-              transform: translate(-100%, -100%);
-              margin-top: -10px;
+              transform: translate(32px, -6px);
+              right: anchor(center);
             `
           : css`
-              transform: translate(-50%, -100%);
-              margin-top: -10px;
+              transform: translate(-50%, -6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) =>
@@ -174,27 +119,28 @@ const PLACEMENTS = {
           border-top-style: solid;
           border-radius: 2px;
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
         }
       `}
   `,
   bottom: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    top: anchor(bottom);
     ${({ withArrow, arrowPosition }) =>
       withArrow && arrowPosition === 'left'
         ? css`
-            transform: translate(0, 10px);
-            margin-top: 0;
+            transform: translate(-32px, 6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
           ? css`
-              transform: translate(-100%, 10px);
-              margin-top: 0;
+              transform: translate(32px, 6px);
+              right: anchor(center);
             `
           : css`
-              transform: translate(-50%, 10px);
-              margin-top: 0;
+              transform: translate(-50%, 6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) =>
@@ -207,17 +153,19 @@ const PLACEMENTS = {
           border-bottom-style: solid;
           border-radius: 0 0 2px 2px;
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
         }
       `}
   `,
   left: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
     transform: translate(-100%, -50%);
-    margin-left: -10px;
+    margin-left: -7px;
+    top: anchor(center);
+    left: anchor(left);
 
-    ${({ withArrow, arrowPosition }) =>
+    ${({ withArrow }) =>
       withArrow &&
       css`
         &::after {
@@ -226,19 +174,19 @@ const PLACEMENTS = {
           border-left-width: 8px;
           border-left-style: solid;
           border-radius: 2px 0 0 2px;
+          right: -9px;
           top: 50%;
-          right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
   right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
     transform: translate(0, -50%);
-    margin-left: 10px;
+    margin-left: 7px;
+    top: anchor(center);
+    left: anchor(right);
 
-    ${({ withArrow, arrowPosition }) =>
+    ${({ withArrow }) =>
       withArrow &&
       css`
         &::after {
@@ -247,31 +195,40 @@ const PLACEMENTS = {
           border-right-width: 8px;
           border-right-style: solid;
           border-radius: 0 2px 2px 0;
+          left: -9px;
           top: 50%;
-          left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
 };
 
-const TooltipWrapper = styled.div`
-  position: relative;
+const TooltipWrapper = styled.div.attrs<{ anchorName: string }>(({ anchorName }) => ({
+  style: {
+    anchorName: anchorName,
+  } as React.CSSProperties,
+}))<{ anchorName: string }>`
   display: flex;
 `;
-/* eslint-disable theme/no-raw-colors-in-styles */
-const TooltipBody = styled.span<
-  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & { width?: string }
->`
-  display: inline-block;
 
+const TooltipBody = styled.span.attrs<{ anchorName: string }>(({ anchorName }) => ({
+  style: {
+    positionAnchor: anchorName,
+  } as React.CSSProperties,
+}))<
+  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & {
+    width?: string;
+    anchorName: string;
+  }
+>`
+  position: fixed;
+  min-width: 64px;
   padding: var(--tooltip-padding);
-  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
+  text-align: left;
 
   border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
@@ -299,9 +256,9 @@ const TooltipBody = styled.span<
     0px 8px 24px 8px #0000000a,
     0px 4px 12px 0px #00000014;
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
+
   ${({ placement }) => css`
     ${PLACEMENTS[placement]};
   `}
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */

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

@@ -3,4 +3,8 @@ import { css } from 'styled-components';
 export const tooltipDarkMode = css`
   --tooltip-bg-color: var(--color-warm-grey-4);
   --tooltip-border-color: var(--color-warm-grey-5);
+
+  .tooltip-copy-button {
+    --tooltip-bg-color: var(--color-warm-grey-4);
+  }
 `;

package/src/components/Tooltip/variables.ts

@@ -18,9 +18,9 @@ export const tooltip = css`
   --tooltip-max-width: 400px;
 
   .tooltip-copy-button {
-    --tooltip-text-color: var(--text-color-secondary);
-    --tooltip-bg-color: var(--bg-color-raised);
-    --tooltip-arrow-color: var(--tooltip-bg-color);
+    --tooltip-text-color: var(--color-static-white);
+    --tooltip-bg-color: var(--color-warm-grey-10);
+    --tooltip-arrow-color: var(--tooltip-border-color);
   }
 
   .tooltip-catalog {

package/src/components/UserMenu/LoginButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { JSX } from 'react';
+import type { ButtonVariant, ButtonSize } from '@redocly/theme/components/Button/Button';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -8,26 +8,41 @@ import { Button } from '@redocly/theme/components/Button/Button';
 export type LoginButtonProps = {
   href: string;
   className?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  label?: string;
+  labelTranslationKey?: string;
+  ['data-component-name']?: string;
 };
 
-export function LoginButton({ href, className }: LoginButtonProps): JSX.Element {
+export function LoginButton({
+  href,
+  className,
+  variant = 'primary',
+  size = 'medium',
+  label,
+  labelTranslationKey = 'userMenu.login',
+  'data-component-name': componentName = 'UserMenu/LoginButton',
+}: LoginButtonProps) {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
 
+  const buttonLabel = label || translate(labelTranslationKey, 'Login');
+
   return (
-    <div data-component-name="UserMenu/LoginButton" className={className}>
+    <span data-component-name={componentName} className={className}>
       <Button
-        data-translation-key="userMenu.login"
+        data-translation-key={label ? undefined : labelTranslationKey}
         to={href}
         onClick={() => telemetry.sendLoginButtonClickedMessage()}
         data-testid="login-btn"
         extraClass={className}
-        variant="primary"
-        size="medium"
+        variant={variant}
+        size={size}
       >
-        {translate('userMenu.login', 'Login')}
+        {buttonLabel}
       </Button>
-    </div>
+    </span>
   );
 }

package/src/core/constants/search.ts

@@ -1,4 +1,4 @@
-import type { AiSearchErrorConfig } from '../types/search';
+import { type AiSearchErrorConfig, ToolCallName } from '../types/search';
 
 export enum AiSearchError {
   Unauthorized = 'ai_search_unauthorized',
@@ -45,3 +45,29 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
 export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 
 export const SEARCH_DEBOUNCE_TIME_MS = 300;
+
+export const TOOL_CALL_DISPLAY_TEXT: Record<
+  ToolCallName,
+  { inProgressText: string; completedText: string }
+> = {
+  [ToolCallName.SearchDocumentation]: {
+    inProgressText: 'Searching documentation...',
+    completedText: 'Search completed',
+  },
+  [ToolCallName.ListApis]: {
+    inProgressText: 'Browsing APIs...',
+    completedText: 'Browsed APIs',
+  },
+  [ToolCallName.GetEndpoints]: {
+    inProgressText: 'Browsing endpoints for API...',
+    completedText: 'Browsed endpoints for API',
+  },
+  [ToolCallName.GetSecuritySchemes]: {
+    inProgressText: 'Browsing security schemes for API...',
+    completedText: 'Browsed security schemes for API',
+  },
+  [ToolCallName.GetFullApiDescription]: {
+    inProgressText: 'Reading API description...',
+    completedText: 'Read API description',
+  },
+};

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -16,6 +16,7 @@ export const useThemeHooks = vi.fn(() => ({
     send: vi.fn(),
     sendCodeSnippetReportedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
+    sendColorModeSwitchedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({
@@ -54,7 +55,15 @@ export const useThemeHooks = vi.fn(() => ({
   })),
   useAiSearch: vi.fn(() => ({
     askQuestion: vi.fn(),
-    references: [],
+    isGeneratingResponse: false,
+    question: '',
+    response: undefined,
+    resources: [],
+    clearConversation: vi.fn(),
+    error: null,
+    conversation: [],
+    setConversation: vi.fn(),
+    toolCalls: [],
   })),
   useFacetQuery: vi.fn(() => ({
     searchFacet: null,

package/src/core/hooks/search/use-search-dialog.ts

@@ -20,7 +20,7 @@ export function useSearchDialog() {
     if (hotKeys) {
       hotkeys(hotKeys, (ev) => {
         setIsOpen(true);
-        telemetry.sendSearchOpenedMessage({ method: 'shortcut' });
+        telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'shortcut' }]);
         ev.preventDefault();
       });
 
@@ -30,7 +30,7 @@ export function useSearchDialog() {
   }, [hotKeys]);
 
   const onOpen = useCallback(function () {
-    telemetry.sendSearchOpenedMessage({ method: 'click' });
+    telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'click' }]);
     setIsOpen(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/core/hooks/use-color-switcher.ts

@@ -50,7 +50,9 @@ export const useColorSwitcher = () => {
     window.requestAnimationFrame(() => {
       root.classList.remove('notransition');
     });
-    telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
+    telemetry.sendColorModeSwitchedMessage([
+      { object: 'color_mode', from: activeColorMode, to: newMode },
+    ]);
     setActiveColorMode(newMode);
   };
 

package/src/core/hooks/use-mcp-config.ts

@@ -4,6 +4,7 @@ import { useThemeHooks } from './use-theme-hooks';
 import { IS_BROWSER } from '../utils/dom';
 import { DEFAULT_MCP_SERVER_NAME } from '../constants';
 import { generateMCPDeepLink } from '../utils/mcp';
+import { withPathPrefix } from '../utils/urls';
 
 export type McpConfig = {
   serverName: string;
@@ -25,7 +26,7 @@ export function useMCPConfig(): McpConfig {
     ? window.location.origin
     : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
   const serverName = name || DEFAULT_MCP_SERVER_NAME;
-  const serverUrl = `${origin}/mcp`;
+  const serverUrl = `${origin}${withPathPrefix('/mcp')}`;
   const isMcpDisabled = !enabled || false;
 
   const cursorUrl = useMemo(

package/src/core/hooks/use-modal-scroll-lock.ts

@@ -1,21 +1,40 @@
 import { useEffect } from 'react';
 
-export function useModalScrollLock(isOpen: boolean) {
+export function useModalScrollLock(isOpen: boolean): void {
   useEffect(() => {
-    const originalOverflow = document.body.style.overflow;
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      return;
+    }
+
+    const { body, documentElement } = document;
+    const originalOverflow = body.style.overflow;
+    const originalPaddingRight = body.style.paddingRight;
+    const originalScrollbarWidth =
+      documentElement.style.getPropertyValue('--modal-scrollbar-width');
+
+    const restoreScrollState = () => {
+      body.style.overflow = originalOverflow;
+      body.style.paddingRight = originalPaddingRight;
+      if (originalScrollbarWidth) {
+        documentElement.style.setProperty('--modal-scrollbar-width', originalScrollbarWidth);
+      } else {
+        documentElement.style.removeProperty('--modal-scrollbar-width');
+      }
+    };
 
     if (isOpen) {
-      document.body.style.overflow = 'hidden';
-      document.body.style.marginRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = originalOverflow;
-      document.body.style.marginRight = '';
+      const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+
+      body.style.overflow = 'hidden';
+
+      if (scrollbarWidth > 0) {
+        body.style.paddingRight = `${scrollbarWidth}px`;
+        documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
+      }
     }
 
     return () => {
-      document.body.style.overflow = originalOverflow;
-      document.body.style.marginRight = '';
+      restoreScrollState();
     };
   }, [isOpen]);
 }

package/src/core/hooks/use-outside-click.ts

@@ -2,22 +2,33 @@ import { useEffect } from 'react';
 
 import type { RefObject } from 'react';
 
+type OutsideClickRef = RefObject<HTMLElement | null>;
+
 export function useOutsideClick(
-  ref: RefObject<HTMLElement | null>,
+  refs: OutsideClickRef | OutsideClickRef[],
   handler?: (event: MouseEvent | TouchEvent) => void,
 ): void {
   useEffect(() => {
+    const refList = Array.isArray(refs) ? refs : [refs];
+
     const listener = (event: MouseEvent | TouchEvent) => {
-      if (!handler || !ref.current || ref.current.contains(event.target as Node)) {
-        return;
+      if (!handler) return;
+
+      const target = event.target as Node;
+
+      const isInside = refList.some((ref) => ref.current && ref.current.contains(target));
+
+      if (!isInside) {
+        handler(event);
       }
-      handler(event);
     };
+
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
+
     return () => {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, [ref, handler]);
+  }, [refs, handler]);
 }