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

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

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/tooltip.ts

@@ -0,0 +1,14 @@
+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';
+};

package/src/core/utils/transform-revisions-to-version-history.ts

@@ -53,27 +53,19 @@ export function transformRevisionsToVersionHistory({
     // Check if any revision in this version group is the default version
     const isDefaultVersion = versionRevisions.some((rev) => rev.isDefaultVersion === true);
 
-    const revisions =
-      versionRevisions.length > 1
-        ? versionRevisions.map((rev, index): CatalogEntityRevision => {
-            const revisionMatches = currentRevisionDate
-              ? rev.revision === currentRevisionDate
-              : false;
-            const isActiveRevision = revisionMatches && versionMatches;
-            const isCurrentByDefault =
-              !currentRevisionDate &&
-              normalizedCurrentVersion === undefined &&
-              index === 0 &&
-              isCurrent;
-            return {
-              name: `r.${versionRevisions.length - index}`,
-              date: toLocalizedShortDateTime(rev.revision, locale),
-              revisionDate: rev.revision,
-              isActive: isActiveRevision || isCurrentByDefault,
-              isCurrent: rev.isCurrent ?? false,
-            };
-          })
-        : undefined;
+    const revisions = versionRevisions.map((rev, index): CatalogEntityRevision => {
+      const revisionMatches = currentRevisionDate ? rev.revision === currentRevisionDate : false;
+      const isActiveRevision = revisionMatches && versionMatches;
+      const isCurrentByDefault =
+        !currentRevisionDate && normalizedCurrentVersion === undefined && index === 0 && isCurrent;
+      return {
+        name: `r.${versionRevisions.length - index}`,
+        date: toLocalizedShortDateTime(rev.revision, locale),
+        revisionDate: rev.revision,
+        isActive: isActiveRevision || isCurrentByDefault,
+        isCurrent: rev.isCurrent ?? false,
+      };
+    });
 
     return {
       version,