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

package/lib/components/Tooltip/Tooltip.js

@@ -35,198 +35,22 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const AnchorTooltip_1 = require("../../components/Tooltip/AnchorTooltip");
+const JsTooltip_1 = require("../../components/Tooltip/JsTooltip");
 const hooks_1 = require("../../core/hooks");
-const Portal_1 = require("../../components/Portal/Portal");
-function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, disabled = false, arrowPosition = 'center', }) {
-    const tooltipWrapperRef = (0, react_1.useRef)(null);
-    const tooltipBodyRef = (0, react_1.useRef)(null);
-    const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
-    const anchorName = `--tooltip${(0, react_1.useId)().replace(/:/g, '')}`;
-    (0, hooks_1.useOutsideClick)(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
-    const isControlled = isOpen !== undefined;
-    (0, react_1.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 (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: tooltipWrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip", anchorName: anchorName }),
-        children,
-        isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, anchorName: anchorName }, tip)))));
+function TooltipComponent(props) {
+    const { useAnchorPositioning } = (0, hooks_1.useThemeHooks)();
+    const { isSupported } = useAnchorPositioning();
+    if (isSupported) {
+        return react_1.default.createElement(AnchorTooltip_1.Tooltip, Object.assign({}, props, { arrowPosition: prepareArrowPosition(props.arrowPosition) }));
+    }
+    return react_1.default.createElement(JsTooltip_1.Tooltip, Object.assign({}, props));
 }
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
-const PLACEMENTS = {
-    top: (0, styled_components_1.css) `
-    bottom: anchor(top);
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
-        ? (0, styled_components_1.css) `
-            transform: translate(-32px, -6px);
-            left: anchor(center);
-          `
-        : arrowPosition === 'right'
-            ? (0, styled_components_1.css) `
-              transform: translate(32px, -6px);
-              right: anchor(center);
-            `
-            : (0, styled_components_1.css) `
-              transform: translate(-50%, -6px);
-              left: anchor(center);
-            `}
-
-    ${({ withArrow, arrowPosition }) => withArrow &&
-        (0, styled_components_1.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: (0, styled_components_1.css) `
-    top: anchor(bottom);
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
-        ? (0, styled_components_1.css) `
-            transform: translate(-32px, 6px);
-            left: anchor(center);
-          `
-        : arrowPosition === 'right'
-            ? (0, styled_components_1.css) `
-              transform: translate(32px, 6px);
-              right: anchor(center);
-            `
-            : (0, styled_components_1.css) `
-              transform: translate(-50%, 6px);
-              left: anchor(center);
-            `}
-
-    ${({ withArrow, arrowPosition }) => withArrow &&
-        (0, styled_components_1.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: (0, styled_components_1.css) `
-    transform: translate(-100%, -50%);
-    margin-left: -7px;
-    top: anchor(center);
-    left: anchor(left);
-
-    ${({ withArrow }) => withArrow &&
-        (0, styled_components_1.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: (0, styled_components_1.css) `
-    transform: translate(0, -50%);
-    margin-left: 7px;
-    top: anchor(center);
-    left: anchor(right);
-
-    ${({ withArrow }) => withArrow &&
-        (0, styled_components_1.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 prepareArrowPosition = (arrowPosition) => {
+    if (arrowPosition === 'bottom' || arrowPosition === 'top') {
+        return 'center';
+    }
+    return arrowPosition;
 };
-const TooltipWrapper = styled_components_1.default.div.attrs(({ anchorName }) => ({
-    style: {
-        anchorName: anchorName,
-    },
-})) `
-  display: flex;
-`;
-const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => ({
-    style: {
-        positionAnchor: anchorName,
-    },
-})) `
-  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:
-    0px 8px 24px 8px #0000000a,
-    0px 4px 12px 0px #00000014;
-
-  width: ${({ width }) => width || 'max-content'};
-
-  ${({ placement }) => (0, styled_components_1.css) `
-    ${PLACEMENTS[placement]};
-  `}
-`;
 //# sourceMappingURL=Tooltip.js.map

package/lib/core/hooks/use-page-actions.js

@@ -199,18 +199,22 @@ function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, })
     return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
 }
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // Can't use any actions if search is globally disabled (markdown files are not generated)
+    if ((_a = themeConfig.search) === null || _a === void 0 ? void 0 : _a.hide) {
+        return true;
+    }
     // Can't use any actions if no markdown files are generated for LLMs
-    if ((_b = (_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.seo) === null || _a === void 0 ? void 0 : _a.llmstxt) === null || _b === void 0 ? void 0 : _b.hide) {
+    if ((_c = (_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.seo) === null || _b === void 0 ? void 0 : _b.llmstxt) === null || _c === void 0 ? void 0 : _c.hide) {
         return true;
     }
     // Page actions are explicitly disabled in config
-    if ((_d = (_c = themeConfig.navigation) === null || _c === void 0 ? void 0 : _c.actions) === null || _d === void 0 ? void 0 : _d.hide) {
+    if ((_e = (_d = themeConfig.navigation) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.hide) {
         return true;
     }
     // Page is excluded from search
-    const isOpenApiPage = ((_e = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _e === void 0 ? void 0 : _e.type) === 'openapi' || ((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.subType) === 'openapi-operation';
-    const isPageExcludedFromSearch = ((_g = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _g === void 0 ? void 0 : _g.excludeFromSearch) || (isOpenApiPage && openapiExcludeFromSearch);
+    const isOpenApiPage = ((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.type) === 'openapi' || ((_g = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _g === void 0 ? void 0 : _g.subType) === 'openapi-operation';
+    const isPageExcludedFromSearch = ((_h = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _h === void 0 ? void 0 : _h.excludeFromSearch) || (isOpenApiPage && openapiExcludeFromSearch);
     if (isPageExcludedFromSearch) {
         return true;
     }

package/lib/core/hooks/use-theme-hooks.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 const use_telemetry_fallback_1 = require("./use-telemetry-fallback");
 const fallbacks = {
+    useAnchorPositioning: () => ({ isSupported: false }),
     useTranslate: () => ({
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),

package/lib/core/types/hooks.d.ts

@@ -16,6 +16,9 @@ import type { DrilldownMenuItemDetails } from './sidebar';
 import { BffCatalogEntity, BffCatalogEntityList, BffCatalogRelatedEntity, BffCatalogRelatedEntityList, BffCatalogEntityRevision, BffCatalogEntityRevisionList } from './catalog';
 import { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
+    useAnchorPositioning: () => {
+        isSupported: boolean;
+    };
     useTranslate: () => {
         translate: TFunction;
     };

package/lib/core/types/index.d.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/lib/core/types/tooltip.d.ts

@@ -0,0 +1,13 @@
+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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.63.0-next.3",
+  "version": "0.63.0-next.4",
   "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.3"
   },
   "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/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/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}