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

package/lib/core/types/tooltip.d.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';
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+};

package/lib/core/types/tooltip.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=tooltip.js.map

package/lib/core/utils/transform-revisions-to-version-history.js

@@ -31,26 +31,19 @@ function transformRevisionsToVersionHistory({ revisions, currentRevisionDate, cu
         }
         // 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) => {
-                var _a;
-                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: (0, date_1.toLocalizedShortDateTime)(rev.revision, locale),
-                    revisionDate: rev.revision,
-                    isActive: isActiveRevision || isCurrentByDefault,
-                    isCurrent: (_a = rev.isCurrent) !== null && _a !== void 0 ? _a : false,
-                };
-            })
-            : undefined;
+        const revisions = versionRevisions.map((rev, index) => {
+            var _a;
+            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: (0, date_1.toLocalizedShortDateTime)(rev.revision, locale),
+                revisionDate: rev.revision,
+                isActive: isActiveRevision || isCurrentByDefault,
+                isCurrent: (_a = rev.isCurrent) !== null && _a !== void 0 ? _a : false,
+            };
+        });
         return {
             version,
             date: (0, date_1.toLocalizedShortDate)((latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.revision) || null, locale),

package/lib/index.d.ts

@@ -30,6 +30,7 @@ export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';
 export * from './components/Buttons/NewTabButton';
+export * from './components/Buttons/DownloadButton';
 export * from './components/Buttons/AIAssistantButton';
 export * from './components/Markdown/Markdown';
 export * from './components/Markdown/styles/base-table';

package/lib/index.js

@@ -70,6 +70,7 @@ __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);
 __exportStar(require("./components/Buttons/EmailButton"), exports);
 __exportStar(require("./components/Buttons/NewTabButton"), exports);
+__exportStar(require("./components/Buttons/DownloadButton"), exports);
 __exportStar(require("./components/Buttons/AIAssistantButton"), exports);
 /* Markdown */
 __exportStar(require("./components/Markdown/Markdown"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.63.0-next.3",
+  "version": "0.63.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.9.0-next.1"
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.4"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.7.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.43.0"
+    "@redocly/config": "0.44.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/CopyButton.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 
 import type { JSX } from 'react';
-import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
+import type { TooltipProps } from '@redocly/theme/core/types';
 import type { ButtonProps } from '@redocly/theme/components/Button/Button';
 
 import { ClipboardService } from '@redocly/theme/core/utils';
@@ -88,6 +88,7 @@ function CopyButtonComponent({
         tone={tone}
         extraClass={extraClass}
         iconPosition={iconPosition}
+        aria-label="Copy"
       >
         {(type === 'text' || type === 'compound') &&
           (buttonText || translate('codeSnippet.copy.toasterText', 'Copy'))}

package/src/components/Buttons/DownloadButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { DownloadIcon } from '@redocly/theme/icons/DownloadIcon/DownloadIcon';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type DownloadButtonProps = {
+  data: string;
+  dataTestId?: string;
+};
+
+export function DownloadButton({
+  data,
+  dataTestId = 'download-button',
+}: DownloadButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <div data-component-name="Buttons/DownloadButton">
+      <Tooltip
+        tip={translate('button.download.tooltipText', 'Download description')}
+        placement="top"
+        arrowPosition="right"
+      >
+        <a href={data} target="_blank" download rel="noreferrer">
+          <Button
+            variant="text"
+            size="small"
+            aria-label="Download"
+            icon={<DownloadIcon />}
+            data-testid={dataTestId}
+          />
+        </a>
+      </Tooltip>
+    </div>
+  );
+}

package/src/components/Buttons/EmailButton.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'react';
 
 import { Button } from '@redocly/theme/components/Button/Button';
 import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type EmailButtonProps = {
   data: string;
@@ -11,20 +13,28 @@ export type EmailButtonProps = {
 };
 
 export function EmailButton({ data, dataTestId = 'email-button' }: EmailButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const onClick = () => {
     window.location.href = `mailto:${data}`;
   };
 
   return (
     <div data-component-name="Buttons/EmailButton">
-      <Button
-        onClick={onClick}
-        icon={<EmailIcon />}
-        size="small"
-        variant="text"
-        data-testid={dataTestId}
-        aria-label="Email"
-      />
+      <Tooltip
+        tip={translate('button.email.tooltipText', 'Send email')}
+        placement="top"
+        arrowPosition="right"
+      >
+        <Button
+          onClick={onClick}
+          icon={<EmailIcon />}
+          size="small"
+          variant="text"
+          data-testid={dataTestId}
+          aria-label="Email"
+        />
+      </Tooltip>
     </div>
   );
 }

package/src/components/Buttons/NewTabButton.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'react';
 
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type NewTabButtonProps = {
   data: string;
@@ -14,20 +16,29 @@ export function NewTabButton({
   data,
   dataTestId = 'new-tab-button',
 }: NewTabButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const onClick = () => {
     window.open(data, '_blank');
   };
 
   return (
     <div data-component-name="Buttons/NewTabButton">
-      <Button
-        onClick={onClick}
-        icon={<ArrowUpRightIcon />}
-        data-testid={dataTestId}
-        aria-label="Open in new tab"
-        size="small"
-        variant="text"
-      />
+      <Tooltip
+        tip={translate('button.externalLink.tooltipText', 'Open in new tab')}
+        placement="top"
+        arrowPosition="right"
+      >
+        <Button
+          onClick={onClick}
+          icon={<ArrowUpRightIcon />}
+          data-testid={dataTestId}
+          aria-label="Open in new tab"
+          size="small"
+          variant="text"
+        />
+      </Tooltip>
     </div>
   );
 }

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -128,10 +128,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: var(--navbar-height);
+  top: calc(var(--navbar-height) + var(--banner-height, 0));
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height, 0));
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.tsx

@@ -53,9 +53,6 @@ export function CatalogEntityVersionItem({
 
   const singleRevisionLink = buildRevisionUrl(basePath, group.singleRevisionDate, group.version);
 
-  const isClickable = hasRevisions || Boolean(singleRevisionLink);
-  const isSingleRevisionActive = Boolean(singleRevisionLink && group.isCurrent);
-
   const versionTitle = isNotSpecifiedVersion
     ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
     : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
@@ -64,9 +61,7 @@ export function CatalogEntityVersionItem({
     <VersionButton
       type="button"
       onClick={() => hasRevisions && onToggle(group.version)}
-      $isClickable={isClickable}
       $isCurrent={group.isCurrent}
-      $isActive={isSingleRevisionActive}
     >
       <VersionIcon $isCurrent={group.isCurrent}>
         {group.isCurrent ? (
@@ -155,34 +150,23 @@ export function CatalogEntityVersionItem({
 }
 
 const VersionButton = styled.button<{
-  $isClickable?: boolean;
   $isCurrent?: boolean;
-  $isActive?: boolean;
 }>`
   all: unset;
   display: flex;
   align-items: center;
   width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
   padding: var(--catalog-history-sidebar-version-header-padding);
-  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  cursor: pointer;
   border-radius: var(--catalog-history-sidebar-version-header-border-radius);
   transition: 0.2s ease;
   text-decoration: none;
   color: inherit;
-  background-color: ${({ $isActive }) =>
-    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+  background-color: 'transparent';
 
-  ${({ $isClickable, $isActive }) =>
-    $isClickable &&
-    `
-    &:hover {
-      background-color: ${
-        $isActive
-          ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
-          : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'
-      };
-    }
-  `}
+  &:hover {
+    background-color: var(--catalog-history-sidebar-version-header-bg-color-hover);
+  }
 
   ${({ $isCurrent }) =>
     !$isCurrent &&

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -96,6 +96,7 @@ export function CodeBlockControls({
               size="small"
               data-testid="report-button"
               icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
+              aria-label="Report a problem"
               {...report.props}
             >
               {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
@@ -114,6 +115,7 @@ export function CodeBlockControls({
               size="small"
               data-testid="expand-all"
               icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
+              aria-label="Expand all"
               onClick={expand?.onClick}
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
@@ -133,6 +135,7 @@ export function CodeBlockControls({
               data-testid="collapse-all"
               icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
               onClick={collapse?.onClick}
+              aria-label="Collapse all"
             >
               {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
             </ControlButton>

package/src/components/Menu/MenuItem.tsx

@@ -142,6 +142,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     <MenuItemWrapper
       data-component-name="Menu/MenuItem"
       className={generateClassName({ type, item, className })}
+      role="listitem"
     >
       {item.link ? (
         <MenuItemLink

package/src/components/PageActions/PageActions.tsx

@@ -83,7 +83,12 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
           {buttonAction.buttonText}
         </Button>
         {actions.length > 1 ? (
-          <StyledDropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
+          <StyledDropdown
+            withArrow
+            trigger={<Button aria-label="More actions" />}
+            placement="bottom"
+            alignment="end"
+          >
             <StyledDropdownMenu>{menuItems}</StyledDropdownMenu>
           </StyledDropdown>
         ) : null}

package/src/components/Search/SearchDialog.tsx

@@ -75,7 +75,7 @@ export function SearchDialog({
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter });
+  const aiSearch = useAiSearch({ filter: filter, product: product?.name });
   useModalScrollLock(true);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);

package/src/components/SidebarActions/SidebarActions.tsx

@@ -64,6 +64,7 @@ export const SidebarActions = ({
             }}
             size="small"
             variant="outlined"
+            aria-label={collapsedSidebar ? 'Show sidebar' : 'Hide sidebar'}
             icon={collapsedSidebar ? <SidePanelOpenIcon /> : <SidePanelCloseIcon />}
           />
         </Tooltip>

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -0,0 +1,259 @@
+import React, { memo, useEffect, useRef, useId } 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';
+
+type Props = Exclude<TooltipProps, 'arrowPosition'> & {
+  arrowPosition?: 'left' | 'right' | 'center';
+};
+
+function TooltipComponent({
+  children,
+  isOpen,
+  tip,
+  withArrow = true,
+  placement = 'top',
+  className = 'default',
+  width,
+  dataTestId,
+  disabled = false,
+  arrowPosition = 'center',
+  onClick,
+}: PropsWithChildren<Props>): 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: (e: React.MouseEvent<HTMLDivElement>) => {
+            onClick?.(e);
+            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<Props>>(TooltipComponent);
+
+const PLACEMENTS = {
+  top: css<Pick<Props, '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<Props, '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<Props, '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<Props, '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<Props>, 'placement' | 'withArrow' | 'arrowPosition'> & {
+    width?: string;
+    anchorName: string;
+  }
+>`
+  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);
+
+  &::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 || 'max-content'};
+
+  ${({ placement }) => css`
+    ${PLACEMENTS[placement]};
+  `}
+`;