@redocly/theme 0.63.0-next.3 → 0.63.0-next.5

package/src/components/Tooltip/JsTooltip.tsx

@@ -0,0 +1,296 @@
+import React, { useEffect, memo, useRef, useState, useCallback, useLayoutEffect } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { JSX, PropsWithChildren } from 'react';
+import type { TooltipProps } from '@redocly/theme/core/types';
+
+import { useControl, useOutsideClick } from '@redocly/theme/core/hooks';
+import { Portal } from '@redocly/theme/components/Portal/Portal';
+
+function TooltipComponent({
+  children,
+  isOpen,
+  tip,
+  withArrow = true,
+  placement = 'top',
+  className = 'default',
+  width,
+  dataTestId,
+  disabled = false,
+  arrowPosition = 'center',
+  onClick,
+}: PropsWithChildren<TooltipProps>): JSX.Element {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { isOpened, handleOpen, handleClose } = useControl(isOpen);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+
+  useOutsideClick(ref, 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]);
+
+  useLayoutEffect(() => {
+    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]);
+
+  useEffect(() => {
+    if (isOpen && !disabled) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [isOpen, handleOpen, handleClose, disabled]);
+
+  const controllers = !isControlled &&
+    !disabled && {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+        onClick?.(e);
+        handleClose();
+      },
+      onFocus: handleOpen,
+      onBlur: handleClose,
+    };
+
+  return (
+    <TooltipWrapper
+      ref={ref}
+      {...controllers}
+      className={`tooltip-${className}`}
+      data-component-name="Tooltip/Tooltip"
+    >
+      {children}
+      {isOpened && !disabled && (
+        <Portal>
+          <TooltipBody
+            data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
+            placement={placement}
+            width={width}
+            withArrow={withArrow}
+            arrowPosition={arrowPosition}
+            style={{
+              position: 'fixed',
+              top: tooltipPosition.top,
+              left: tooltipPosition.left,
+            }}
+          >
+            {tip}
+          </TooltipBody>
+        </Portal>
+      )}
+    </TooltipWrapper>
+  );
+}
+
+export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
+
+const PLACEMENTS = {
+  top: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    ${({ withArrow, arrowPosition }) =>
+      withArrow && arrowPosition === 'left'
+        ? css`
+            transform: translate(0, -100%);
+            margin-top: -10px;
+          `
+        : arrowPosition === 'right'
+          ? css`
+              transform: translate(-100%, -100%);
+              margin-top: -10px;
+            `
+          : css`
+              transform: translate(-50%, -100%);
+              margin-top: -10px;
+            `}
+
+    ${({ withArrow, arrowPosition }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 14px solid transparent;
+          border-right: 14px solid transparent;
+          border-top-width: 8px;
+          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%);'}
+        }
+      `}
+  `,
+  bottom: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    ${({ withArrow, arrowPosition }) =>
+      withArrow && arrowPosition === 'left'
+        ? css`
+            transform: translate(0, 10px);
+            margin-top: 0;
+          `
+        : arrowPosition === 'right'
+          ? css`
+              transform: translate(-100%, 10px);
+              margin-top: 0;
+            `
+          : css`
+              transform: translate(-50%, 10px);
+              margin-top: 0;
+            `}
+
+    ${({ withArrow, arrowPosition }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 14px solid transparent;
+          border-right: 14px solid transparent;
+          border-bottom-width: 8px;
+          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%);'}
+        }
+      `}
+  `,
+  left: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    transform: translate(-100%, -50%);
+    margin-left: -10px;
+
+    ${({ withArrow, arrowPosition }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 14px solid transparent;
+          border-bottom: 14px solid transparent;
+          border-left-width: 8px;
+          border-left-style: solid;
+          border-radius: 2px 0 0 2px;
+          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%);'}
+        }
+      `}
+  `,
+  right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    transform: translate(0, -50%);
+    margin-left: 10px;
+
+    ${({ withArrow, arrowPosition }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 14px solid transparent;
+          border-bottom: 14px solid transparent;
+          border-right-width: 8px;
+          border-right-style: solid;
+          border-radius: 0 2px 2px 0;
+          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%);'}
+        }
+      `}
+  `,
+};
+
+const TooltipWrapper = styled.div`
+  position: relative;
+  display: flex;
+`;
+const TooltipBody = styled.span<
+  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & { width?: string }
+>`
+  display: inline-block;
+
+  padding: var(--tooltip-padding);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+
+  border-radius: var(--border-radius-md);
+  transition: opacity 0.3s ease-out;
+
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+
+  z-index: var(--z-index-overlay);
+
+  &::after {
+    position: absolute;
+
+    content: ' ';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+  }
+
+  background: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+    var(--tooltip-border-color, transparent);
+  box-shadow: var(--bg-raised-shadow);
+
+  width: ${({ width }) => width || 'auto'};
+  ${({ placement }) => css`
+    ${PLACEMENTS[placement]};
+  `}
+`;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,264 +1,25 @@
-import React, { memo, useEffect, useRef, useId } from 'react';
-import styled, { css } from 'styled-components';
+import React, { memo } from 'react';
 
-import type { JSX, PropsWithChildren, ReactNode } from 'react';
+import { Tooltip as AnchorTooltip } from '@redocly/theme/components/Tooltip/AnchorTooltip';
+import { Tooltip as JsTooltip } from '@redocly/theme/components/Tooltip/JsTooltip';
+import { TooltipProps } from '@redocly/theme/core/types';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
-import { useControl, useOutsideClick } from '@redocly/theme/core/hooks';
-import { Portal } from '@redocly/theme/components/Portal/Portal';
+function TooltipComponent(props: TooltipProps): React.ReactElement {
+  const { useAnchorPositioning } = useThemeHooks();
+  const { isSupported } = useAnchorPositioning();
 
-export type TooltipProps = {
-  tip: string | ReactNode;
-  isOpen?: boolean;
-  withArrow?: boolean;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-  className?: string;
-  width?: string;
-  dataTestId?: string;
-  disabled?: boolean;
-  arrowPosition?: 'left' | 'right' | 'center';
-};
-
-function TooltipComponent({
-  children,
-  isOpen,
-  tip,
-  withArrow = true,
-  placement = 'top',
-  className = 'default',
-  width,
-  dataTestId,
-  disabled = false,
-  arrowPosition = 'center',
-}: PropsWithChildren<TooltipProps>): JSX.Element {
-  const tooltipWrapperRef = useRef<HTMLDivElement | null>(null);
-  const tooltipBodyRef = useRef<HTMLDivElement | null>(null);
-  const { isOpened, handleOpen, handleClose } = useControl(isOpen);
-  const anchorName = `--tooltip${useId().replace(/:/g, '')}`;
-
-  useOutsideClick(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
-
-  const isControlled = isOpen !== undefined;
-
-  useEffect(() => {
-    if (!isControlled) return;
-
-    if (isOpen && !disabled) {
-      handleOpen();
-    } else {
-      handleClose();
-    }
-  }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
-
-  const controllers =
-    !isControlled && !disabled
-      ? {
-          onMouseEnter: handleOpen,
-          onMouseLeave: handleClose,
-          onClick: handleClose,
-          onFocus: handleOpen,
-          onBlur: handleClose,
-        }
-      : {};
-
-  return (
-    <TooltipWrapper
-      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}
-            anchorName={anchorName}
-          >
-            {tip}
-          </TooltipBody>
-        </Portal>
-      )}
-    </TooltipWrapper>
-  );
-}
-
-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(-32px, -6px);
-            left: anchor(center);
-          `
-        : arrowPosition === 'right'
-          ? css`
-              transform: translate(32px, -6px);
-              right: anchor(center);
-            `
-          : css`
-              transform: translate(-50%, -6px);
-              left: anchor(center);
-            `}
-
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
-      css`
-        &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
-          bottom: 0;
-          ${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(-32px, 6px);
-            left: anchor(center);
-          `
-        : arrowPosition === 'right'
-          ? css`
-              transform: translate(32px, 6px);
-              right: anchor(center);
-            `
-          : css`
-              transform: translate(-50%, 6px);
-              left: anchor(center);
-            `}
-
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
-      css`
-        &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
-          top: 0;
-          ${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: -7px;
-    top: anchor(center);
-    left: anchor(left);
-
-    ${({ withArrow }) =>
-      withArrow &&
-      css`
-        &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
-          right: -9px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      `}
-  `,
-  right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    transform: translate(0, -50%);
-    margin-left: 7px;
-    top: anchor(center);
-    left: anchor(right);
-
-    ${({ withArrow }) =>
-      withArrow &&
-      css`
-        &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
-          left: -9px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      `}
-  `,
-};
-
-const TooltipWrapper = styled.div.attrs<{ anchorName: string }>(({ anchorName }) => ({
-  style: {
-    anchorName: anchorName,
-  } as React.CSSProperties,
-}))<{ anchorName: string }>`
-  display: flex;
-`;
-
-const TooltipBody = styled.span.attrs<{ anchorName: string }>(({ anchorName }) => ({
-  style: {
-    positionAnchor: anchorName,
-  } as React.CSSProperties,
-}))<
-  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & {
-    width?: string;
-    anchorName: string;
+  if (isSupported) {
+    return <AnchorTooltip {...props} arrowPosition={prepareArrowPosition(props.arrowPosition)} />;
   }
->`
-  position: fixed;
-  min-width: 64px;
-  padding: var(--tooltip-padding);
-  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;
-
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
-
-  z-index: var(--z-index-overlay);
+  return <JsTooltip {...props} />;
+}
 
-  &::after {
-    position: absolute;
+export const Tooltip = memo<TooltipProps>(TooltipComponent);
 
-    content: ' ';
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+const prepareArrowPosition = (arrowPosition: TooltipProps['arrowPosition']) => {
+  if (arrowPosition === 'bottom' || arrowPosition === 'top') {
+    return 'center';
   }
-
-  background: var(--tooltip-bg-color);
-  color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
-    var(--tooltip-border-color, transparent);
-  box-shadow:
-    0px 8px 24px 8px #0000000a,
-    0px 4px 12px 0px #00000014;
-
-  width: ${({ width }) => width || 'max-content'};
-
-  ${({ placement }) => css`
-    ${PLACEMENTS[placement]};
-  `}
-`;
+  return arrowPosition;
+};

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

@@ -3,6 +3,9 @@ import { vi, type MockedFunction } from 'vitest';
 import type { ThemeHooks } from '../../types/hooks';
 
 export const useThemeHooks = vi.fn(() => ({
+  useAnchorPositioning: vi.fn(() => ({
+    isSupported: true,
+  })),
   useTranslate: vi.fn(() => ({
     translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue

package/src/core/hooks/use-page-actions.ts

@@ -290,6 +290,11 @@ function shouldHidePageActions(
   themeConfig: UiAccessibleConfig,
   openapiExcludeFromSearch?: boolean,
 ): boolean {
+  // Can't use any actions if search is globally disabled (markdown files are not generated)
+  if (themeConfig.search?.hide) {
+    return true;
+  }
+
   // Can't use any actions if no markdown files are generated for LLMs
   if (pageProps?.seo?.llmstxt?.hide) {
     return true;

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

@@ -6,6 +6,7 @@ import { ThemeDataContext } from '../contexts/ThemeDataContext';
 import { useTelemetryFallback } from './use-telemetry-fallback';
 
 const fallbacks = {
+  useAnchorPositioning: () => ({ isSupported: false }),
   useTranslate: () => ({
     translate: (value?: string, options?: { defaultValue: string } | string) =>
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',

package/src/core/types/hooks.ts

@@ -47,6 +47,7 @@ import {
 import { AiSearchError } from '../constants/search';
 
 export type ThemeHooks = {
+  useAnchorPositioning: () => { isSupported: boolean };
   useTranslate: () => { translate: TFunction };
   /**
    * @deprecated use `useL10n` instead
@@ -116,7 +117,7 @@ export type ThemeHooks = {
     advancedSearch?: boolean;
     askAi?: boolean;
   };
-  useAiSearch: (options?: { filter?: SearchFilterItem[] }) => {
+  useAiSearch: (options?: { filter?: SearchFilterItem[]; product?: string }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
     question: string;

package/src/core/types/index.ts

@@ -19,3 +19,4 @@ export type * from './code-walkthrough';
 export type * from './page-actions';
 export type * from './open-api-info';
 export type * from './segmented';
+export type * from './tooltip';

package/src/core/types/l10n.ts

@@ -275,6 +275,7 @@ export type TranslationKey =
   | 'openapi.actions.hide'
   | 'openapi.actions.more'
   | 'openapi.languages.title'
+  | 'openapi.languages.moreButton.tooltipText'
   | 'openapi.servers.title'
   | 'openapi.operations'
   | 'openapi.webhooks'
@@ -395,6 +396,10 @@ export type TranslationKey =
   | 'graphql.sample'
   | 'graphql.referenced'
   | 'graphql.content.fragment'
+  | 'button.copy.tooltipText'
+  | 'button.download.tooltipText'
+  | 'button.externalLink.tooltipText'
+  | 'button.email.tooltipText'
   | 'codeWalkthrough.download'
   | 'codeWalkthrough.preview'
   | 'time.justNow'

package/src/core/types/tooltip.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export type TooltipProps = {
+  children?: ReactNode;
+  tip: string | ReactNode;
+  isOpen?: boolean;
+  withArrow?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+  width?: string;
+  dataTestId?: string;
+  disabled?: boolean;
+  arrowPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+};