@redocly/theme 0.69.0 → 0.70.0-next.1

package/lib/components/Button/Button.js

@@ -118,7 +118,9 @@ const StyledButton = styled_components_1.default.button `
     height: var(--button-icon-size);
   }
 
-  &:hover {
+  /* A button that owns an open menu keeps its hovered appearance. */
+  &:hover,
+  &[aria-expanded='true'] {
     background-color: var(--button-bg-color-hover);
     color: var(--button-color-hover);
     border-color: var(--button-border-color-hover);
@@ -140,7 +142,8 @@ const StyledButton = styled_components_1.default.button `
     border-color: var(--button-border-color-danger);
     background-color: var(--button-bg-color-danger);
 
-    &:hover {
+    &:hover,
+    &[aria-expanded='true'] {
       color: var(--button-content-color-danger-hover);
       border-color: var(--button-border-color-danger-hover);
       background-color: var(--button-bg-color-danger-hover);

package/lib/components/Button/variables.js

@@ -251,21 +251,30 @@ exports.button = (0, styled_components_1.css) `
   --button-group-divider-opacity: 1;
   --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
 
-  .button-group-primary {
-    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+  .button-group-primary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.32;
   }
 
-  .button-group-secondary {
-    --button-group-divider-color: var(--button-content-color); // @presenter Color
+  .button-group-secondary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.12;
   }
 
-  .button-group-outlined {
+  .button-group-outlined .button {
     --button-group-divider-color: var(--button-border-color); // @presenter Color
     --button-group-divider-opacity: 1;
   }
 
+  .button-group-primary .button.button-tone-danger,
+  .button-group-secondary .button.button-tone-danger {
+    --button-group-divider-color: var(--button-content-color-danger); // @presenter Color
+  }
+
+  .button-group-outlined .button.button-tone-danger {
+    --button-group-divider-color: var(--button-border-color-danger); // @presenter Color
+  }
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Buttons/DownloadButton.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DownloadButton = DownloadButton;
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const DownloadIcon_1 = require("../../icons/DownloadIcon/DownloadIcon");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
@@ -12,9 +13,18 @@ const hooks_1 = require("../../core/hooks");
 function DownloadButton({ data, dataTestId = 'download-button', }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const label = translate('button.download.tooltipText', 'Download description');
     return (react_1.default.createElement("div", { "data-component-name": "Buttons/DownloadButton" },
-        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('button.download.tooltipText', 'Download description'), placement: "top", arrowPosition: "right" },
-            react_1.default.createElement("a", { href: data, target: "_blank", download: true, rel: "noreferrer" },
-                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", "aria-label": "Download", icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), "data-testid": dataTestId })))));
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "top", arrowPosition: "right" },
+            react_1.default.createElement(DownloadLink, { href: data, target: "_blank", download: true, rel: "noreferrer", "aria-label": label },
+                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", "aria-hidden": true, tabIndex: -1, icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), "data-testid": dataTestId })))));
 }
+const DownloadLink = styled_components_1.default.a `
+  text-decoration: none;
+  border-radius: var(--button-border-radius);
+
+  &:focus-visible {
+    outline: 1px solid var(--button-border-color-focused);
+  }
+`;
 //# sourceMappingURL=DownloadButton.js.map

package/lib/components/Catalog/Catalog.d.ts

@@ -1,6 +1,6 @@
-import { JSX } from 'react';
+import { type JSX } from 'react';
 import type { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList, CatalogSwitcherItem, CatalogViewMode } from '../../core/types';
+import type { BffCatalogEntityList, CatalogSwitcherItem, CatalogViewMode } from '../../core/types';
 type CatalogFiltersWithCounts = Record<string, {
     value: string;
     count: number;

package/lib/components/Catalog/CatalogActionsRow.d.ts

@@ -1,5 +1,6 @@
-import React, { JSX } from 'react';
-import { CatalogViewMode } from '../../core/types';
+import type { JSX } from 'react';
+import React from 'react';
+import type { CatalogViewMode } from '../../core/types';
 export type CatalogActionsRowProps = {
     searchQuery: string;
     setSearchQuery: (updatedTerm: string) => void;

package/lib/components/Catalog/CatalogCardView/CatalogCard.d.ts

@@ -1,6 +1,6 @@
-import { JSX } from 'react';
+import type { JSX } from 'react';
 import type { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntity } from '../../../core/types';
+import type { BffCatalogEntity } from '../../../core/types';
 export type CatalogCardProps = {
     entity: BffCatalogEntity;
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogEntities.d.ts

@@ -1,6 +1,6 @@
-import { JSX } from 'react';
+import type { JSX } from 'react';
 import type { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList } from '../../core/types';
+import type { BffCatalogEntityList } from '../../core/types';
 export type CatalogEntitiesProps = {
     catalogConfig: CatalogEntityConfig;
     excludedEntities?: CatalogEntityConfig['excludes'];

package/lib/components/Catalog/CatalogEntitiesEmptyState.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react';
+import type { JSX } from 'react';
 import type { ListType } from '../../core/types';
 interface CatalogEntitiesEmptyStateProps {
     listType?: ListType;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from 'react';
-import { BffCatalogEntity } from '../../../../core/types';
+import { type JSX } from 'react';
+import type { BffCatalogEntity } from '../../../../core/types';
 export type CatalogEntityRelationsGraphProps = {
     entity: BffCatalogEntity;
 };

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.js

@@ -41,7 +41,6 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@xyflow/react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../../../core/hooks");
-const hooks_2 = require("../../../../core/hooks");
 const CatalogEntityRelationsNode_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode");
 const CatalogEntityRelationsEdge_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge");
 const styles_1 = require("../../../../core/styles");
@@ -73,7 +72,7 @@ function CatalogEntityRelationsGraph({ entity, }) {
         entityKey: entity.key,
         filter: combinedFilter,
     });
-    const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = (0, hooks_2.useGraph)({
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = (0, hooks_1.useGraph)({
         entity,
         relations: allRelations !== null && allRelations !== void 0 ? allRelations : [],
     });

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export type CatalogHistoryButtonProps = {
     version: string | null;
+    /** Marks `version` as the group's default, shown as a "(latest)" suffix on the pill. */
+    isDefaultVersion?: boolean;
     className?: string;
 };
-export declare function CatalogEntityHistoryButton({ version, className, }: CatalogHistoryButtonProps): React.ReactElement;
+export declare function CatalogEntityHistoryButton({ version, isDefaultVersion, className, }: CatalogHistoryButtonProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton.js

@@ -40,41 +40,63 @@ exports.CatalogEntityHistoryButton = CatalogEntityHistoryButton;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/RecentlyViewedIcon");
-const CheckmarkOutlineIcon_1 = require("../../../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const RadioCheckButtonIcon_1 = require("../../../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
 const hooks_1 = require("../../../../core/hooks");
 const constants_1 = require("../../../../core/constants");
 const Tooltip_1 = require("../../../../components/Tooltip/Tooltip");
-const hooks_2 = require("../../../../core/hooks");
-function CatalogEntityHistoryButton({ version, className, }) {
-    const [label, setLabel] = (0, react_1.useState)(version === constants_1.VERSION_NOT_SPECIFIED ? null : version);
+/**
+ * The pill label: the page's version, updated by the overlay's close event
+ * (which appends the revision while an old revision is open), with a
+ * "(latest)" suffix on the plain default-version label.
+ */
+function useVersionPillLabel(version, isDefaultVersion) {
+    const pageLabel = version === constants_1.VERSION_NOT_SPECIFIED ? null : version;
+    const [label, setLabel] = (0, react_1.useState)(pageLabel);
+    // Keep the pill in sync when navigation changes the page version.
+    const [lastPageLabel, setLastPageLabel] = (0, react_1.useState)(pageLabel);
+    if (lastPageLabel !== pageLabel) {
+        setLastPageLabel(pageLabel);
+        setLabel(pageLabel);
+    }
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const [labelRef, isLabelTruncated] = (0, hooks_2.useIsTruncated)(label);
+    const latestWord = translate('catalog.history.version.latest', 'latest');
     const handleClose = (0, react_1.useCallback)((e) => {
-        setLabel(e.detail.version === constants_1.VERSION_NOT_SPECIFIED
-            ? e.detail.revision || 'r.1'
-            : `${e.detail.version || version}, ${e.detail.revision || 'r.1'}`);
+        const closedVersion = e.detail.version === constants_1.VERSION_NOT_SPECIFIED ? null : e.detail.version || version;
+        setLabel([closedVersion, e.detail.revision].filter(Boolean).join(', ') || null);
     }, [version]);
     (0, react_1.useEffect)(() => {
-        window.addEventListener('portal:sidebar:close-version-history', (e) => handleClose(e));
-        return () => {
-            window.removeEventListener('portal:sidebar:close-version-history', (e) => handleClose(e));
-        };
+        const onClose = (e) => handleClose(e);
+        window.addEventListener('portal:sidebar:close-version-history', onClose);
+        return () => window.removeEventListener('portal:sidebar:close-version-history', onClose);
     }, [handleClose]);
+    // A label with a revision, or a version named "latest", stays as-is.
+    return label !== null &&
+        label === pageLabel &&
+        isDefaultVersion &&
+        label.toLowerCase() !== latestWord.toLowerCase()
+        ? `${label} (${latestWord})`
+        : label;
+}
+function CatalogEntityHistoryButton({ version, isDefaultVersion, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const displayLabel = useVersionPillLabel(version, isDefaultVersion);
+    const [labelRef, isLabelTruncated] = (0, hooks_1.useIsTruncated)(displayLabel);
     const handleClick = () => {
         window.dispatchEvent(new CustomEvent('portal:sidebar:open-version-history'));
     };
     return (react_1.default.createElement(CatalogHistoryButtonWrapper, { className: className, "data-component-name": "Catalog/CatalogHistoryButton" },
-        react_1.default.createElement(Separator, null),
         react_1.default.createElement(HistoryItem, { onClick: handleClick },
             react_1.default.createElement(HistoryIcon, null),
             react_1.default.createElement(HistoryContent, null,
-                react_1.default.createElement(HistoryText, null, translate('catalog.history.button.label', 'Version history')),
-                label && (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom", arrowPosition: "left", disabled: !isLabelTruncated },
+                react_1.default.createElement(HistoryText, null, translate('catalog.history.button.label', 'Version')),
+                displayLabel && (react_1.default.createElement(Tooltip_1.Tooltip, { tip: displayLabel, placement: "bottom", arrowPosition: "left", disabled: !isLabelTruncated },
                     react_1.default.createElement(VersionPillWrapper, null,
                         react_1.default.createElement(VersionPill, null,
                             react_1.default.createElement(CheckmarkIcon, null),
-                            react_1.default.createElement("span", { ref: labelRef }, label)))))))));
+                            react_1.default.createElement("span", { ref: labelRef }, displayLabel))))))),
+        react_1.default.createElement(Separator, null)));
 }
 const CatalogHistoryButtonWrapper = styled_components_1.default.div `
   width: var(--catalog-history-button-width);
@@ -83,18 +105,18 @@ const Separator = styled_components_1.default.div `
   width: 100%;
   height: 1px;
   background-color: var(--catalog-history-separator-border-color);
-  margin-bottom: var(--catalog-history-separator-margin-bottom);
+  margin: var(--catalog-history-separator-margin);
   flex-shrink: 0;
 `;
 const HistoryItem = styled_components_1.default.button `
   all: unset;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--catalog-history-item-gap);
   padding: var(--catalog-history-item-padding);
-  margin-bottom: var(--catalog-history-item-margin-bottom);
-  width: var(--catalog-history-button-item-width);
+  width: 100%;
   border-radius: var(--catalog-history-item-border-radius);
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -105,13 +127,11 @@ const HistoryItem = styled_components_1.default.button `
 `;
 const HistoryContent = styled_components_1.default.div `
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   flex: 1;
   gap: var(--catalog-history-item-gap);
   min-width: 0;
-  max-width: var(--catalog-history-content-max-width);
 `;
 const HistoryText = styled_components_1.default.span `
   flex: 0 0 auto;
@@ -125,17 +145,19 @@ const HistoryText = styled_components_1.default.span `
 const VersionPillWrapper = styled_components_1.default.div `
   flex: 0 1 auto;
   min-width: 0;
-  max-width: var(--catalog-history-content-max-width);
 `;
 const HistoryIcon = (0, styled_components_1.default)(RecentlyViewedIcon_1.RecentlyViewedIcon) `
   width: var(--catalog-history-icon-size);
   height: var(--catalog-history-icon-size);
   flex-shrink: 0;
+  margin-right: var(--catalog-history-icon-gap);
 `;
 const VersionPill = styled_components_1.default.div `
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: var(--catalog-history-pill-gap);
+  height: var(--catalog-history-pill-height);
   padding: var(--catalog-history-pill-padding-vertical) var(--catalog-history-pill-padding-horizontal);
   border: 1px solid var(--catalog-history-pill-border-color);
   border-radius: var(--catalog-history-pill-border-radius);
@@ -154,7 +176,7 @@ const VersionPill = styled_components_1.default.div `
     min-width: 0;
   }
 `;
-const CheckmarkIcon = (0, styled_components_1.default)(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon) `
+const CheckmarkIcon = (0, styled_components_1.default)(RadioCheckButtonIcon_1.RadioCheckButtonIcon) `
   width: var(--catalog-history-pill-icon-size);
   height: var(--catalog-history-pill-icon-size);
   min-width: var(--catalog-history-pill-icon-size);

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -47,13 +47,54 @@ const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
 const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem");
 const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/RecentlyViewedIcon");
+/**
+ * Overlay visibility, driven by the button's open event. The overlay stays
+ * open only on the location it was opened at, so navigation closes it; every
+ * close (explicit or by navigation) emits the close event that syncs the
+ * button pill with the given version/revision.
+ */
+function useVersionHistoryOverlay(version, revisionLabel) {
+    const location = (0, react_router_1.useLocation)();
+    const locationKey = `${location.pathname}${location.search}`;
+    const locationKeyRef = (0, react_1.useRef)(locationKey);
+    locationKeyRef.current = locationKey;
+    const [openLocation, setOpenLocation] = (0, react_1.useState)(null);
+    const closeEventPending = (0, react_1.useRef)(false);
+    if (openLocation !== null && openLocation !== locationKey) {
+        closeEventPending.current = true;
+        setOpenLocation(null);
+    }
+    (0, react_1.useEffect)(() => {
+        const open = () => setOpenLocation(locationKeyRef.current);
+        window.addEventListener('portal:sidebar:open-version-history', open);
+        return () => window.removeEventListener('portal:sidebar:open-version-history', open);
+    }, []);
+    const emitClose = (0, react_1.useCallback)(() => {
+        window.dispatchEvent(new CustomEvent('portal:sidebar:close-version-history', {
+            detail: { version, revision: revisionLabel },
+        }));
+    }, [version, revisionLabel]);
+    // Dispatched after the post-navigation render so the close event carries
+    // the freshly navigated-to version/revision.
+    (0, react_1.useEffect)(() => {
+        if (!closeEventPending.current)
+            return;
+        closeEventPending.current = false;
+        emitClose();
+    }, [openLocation, emitClose]);
+    const close = (0, react_1.useCallback)(() => {
+        emitClose();
+        setOpenLocation(null);
+    }, [emitClose]);
+    return { isOpen: openLocation !== null && openLocation === locationKey, close };
+}
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const location = (0, react_router_1.useLocation)();
     const basePath = location.pathname;
-    const { useTranslate, useFetchCatalogEntityRevisions, useL10nConfig } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useFetchCatalogEntityRevisions, useL10nConfig, usePageVersions } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { currentLocale } = useL10nConfig();
+    const { versions: pageVersions } = usePageVersions();
     const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
     const normalizedLocale = currentLocale && currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale : 'en-US';
     const versionHistoryItems = (0, react_1.useMemo)(() => (0, utils_1.transformRevisionsToVersionHistory)({
@@ -66,27 +107,14 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
         var _a;
         const itemWithActiveRevision = versionHistoryItems.find((item) => { var _a; return (_a = item.revisions) === null || _a === void 0 ? void 0 : _a.some((revision) => revision.isActive); });
         const activeRevision = (_a = itemWithActiveRevision === null || itemWithActiveRevision === void 0 ? void 0 : itemWithActiveRevision.revisions) === null || _a === void 0 ? void 0 : _a.find((revision) => revision.isActive);
-        return activeRevision === null || activeRevision === void 0 ? void 0 : activeRevision.name;
+        // Show the revision label only while an old revision is open.
+        return activeRevision && !activeRevision.isCurrent ? activeRevision.name : undefined;
     }, [versionHistoryItems]);
+    const { isOpen, close } = useVersionHistoryOverlay(version, activeRevisionLabel);
     const [expandedVersions, setExpandedVersions] = (0, react_1.useState)(new Set());
     (0, react_1.useEffect)(() => {
         setExpandedVersions(new Set(versionHistoryItems.filter((item) => item.isExpanded).map((item) => item.version)));
     }, [versionHistoryItems]);
-    const handleOpenSidebar = (0, react_1.useCallback)(() => {
-        setIsOpen(true);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
-        return () => {
-            window.removeEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
-        };
-    }, [handleOpenSidebar]);
-    const handleClose = () => {
-        window.dispatchEvent(new CustomEvent('portal:sidebar:close-version-history', {
-            detail: { version, revision: activeRevisionLabel },
-        }));
-        setIsOpen(false);
-    };
     const toggleVersion = (version) => {
         setExpandedVersions((prev) => {
             const newSet = new Set(prev);
@@ -104,13 +132,13 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
     }
     return (react_1.default.createElement(SidebarOverlay, { className: className, "data-component-name": "Catalog/CatalogHistorySidebar" },
         react_1.default.createElement(SidebarHeader, null,
-            react_1.default.createElement(HeaderWrapper, null,
-                react_1.default.createElement(HistoryIcon, null),
-                react_1.default.createElement(HeaderTitle, null, translate('catalog.history.sidebar.title', 'Version history'))),
-            react_1.default.createElement(CloseButton, { onClick: handleClose, "aria-label": translate('catalog.history.sidebar.close', 'Close version history') },
-                react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "20px", color: "--catalog-history-sidebar-close-icon-color" }))),
+            react_1.default.createElement(HistoryIcon, null),
+            react_1.default.createElement(HeaderTitle, null, translate('catalog.history.sidebar.title', 'Version')),
+            react_1.default.createElement(CloseButton, { onClick: close, "aria-label": translate('catalog.history.sidebar.close', 'Close version history') },
+                react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "14px", color: "--catalog-history-sidebar-close-icon-color" }))),
+        react_1.default.createElement(Divider, null),
         react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: true },
-            react_1.default.createElement(VersionList, null, versionHistoryItems.map((group) => (react_1.default.createElement(CatalogEntityVersionItem_1.CatalogEntityVersionItem, { key: group.version, group: group, basePath: basePath, isExpanded: expandedVersions.has(group.version), onToggle: toggleVersion })))))));
+            react_1.default.createElement(VersionList, null, versionHistoryItems.map((group) => { var _a; return (react_1.default.createElement(CatalogEntityVersionItem_1.CatalogEntityVersionItem, { key: group.version, group: group, basePath: basePath, isExpanded: expandedVersions.has(group.version), onToggle: toggleVersion, versionLink: (_a = pageVersions === null || pageVersions === void 0 ? void 0 : pageVersions.find((pageVersion) => pageVersion.version === group.version)) === null || _a === void 0 ? void 0 : _a.link })); })))));
 }
 const SidebarOverlay = styled_components_1.default.div `
   position: fixed;
@@ -118,6 +146,7 @@ const SidebarOverlay = styled_components_1.default.div `
   left: 0;
   width: var(--sidebar-width);
   height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  padding: var(--catalog-history-sidebar-padding);
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;
@@ -125,15 +154,25 @@ const SidebarOverlay = styled_components_1.default.div `
   z-index: calc(var(--z-index-raised) - 1);
   overflow: hidden;
 `;
+// Same row geometry as the history button, so opening the overlay keeps the
+// icon and title in place.
 const SidebarHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--catalog-history-item-gap);
   padding: var(--catalog-history-sidebar-header-padding);
-  border-bottom: 1px solid var(--catalog-history-sidebar-border-color);
+  border-radius: var(--border-radius-lg);
+  flex-shrink: 0;
+`;
+const Divider = styled_components_1.default.div `
+  height: 1px;
+  background-color: var(--catalog-history-sidebar-border-color);
+  margin: var(--catalog-history-sidebar-divider-margin);
   flex-shrink: 0;
 `;
 const HeaderTitle = styled_components_1.default.h2 `
+  flex: 1;
+  min-width: 0;
   margin: 0;
   font-family: var(--catalog-history-sidebar-header-font-family);
   font-size: var(--catalog-history-sidebar-header-font-size);
@@ -160,17 +199,12 @@ const CloseButton = styled_components_1.default.button `
 const VersionList = styled_components_1.default.ul `
   list-style: none;
   margin: 0;
-  padding: var(--catalog-history-sidebar-content-padding);
-  margin-top: var(--catalog-history-sidebar-content-margin-top);
+  padding: 0;
 `;
 const HistoryIcon = (0, styled_components_1.default)(RecentlyViewedIcon_1.RecentlyViewedIcon) `
   width: var(--catalog-history-icon-size);
   height: var(--catalog-history-icon-size);
   flex-shrink: 0;
-`;
-const HeaderWrapper = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
+  margin-right: var(--catalog-history-icon-gap);
 `;
 //# sourceMappingURL=CatalogEntityHistorySidebar.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem.d.ts

@@ -4,5 +4,7 @@ export type CatalogEntityRevisionItemProps = {
     revisionItem: CatalogEntityRevision;
     basePath: string;
     version?: string | null;
+    /** The version's own page URL (from the host's usePageVersions). */
+    versionLink?: string;
 };
-export declare function CatalogEntityRevisionItem({ revisionItem, basePath, version, }: CatalogEntityRevisionItemProps): React.ReactElement;
+export declare function CatalogEntityRevisionItem({ revisionItem, basePath, version, versionLink, }: CatalogEntityRevisionItemProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem.js

@@ -10,11 +10,17 @@ const Link_1 = require("../../../../components/Link/Link");
 const Tag_1 = require("../../../../components/Tag/Tag");
 const utils_1 = require("../../../../core/utils");
 const hooks_1 = require("../../../../core/hooks");
-function CatalogEntityRevisionItem({ revisionItem, basePath, version, }) {
+function CatalogEntityRevisionItem({ revisionItem, basePath, version, versionLink, }) {
     var _a, _b;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const revisionFilter = (_a = (0, utils_1.buildRevisionUrl)(basePath, revisionItem.revisionDate, version)) !== null && _a !== void 0 ? _a : basePath;
+    // The current revision links to the version's live page. Older revisions
+    // add ?revision= to that URL. Hosts without page-version links keep the
+    // legacy ?revision=&version= contract.
+    const base = versionLink !== null && versionLink !== void 0 ? versionLink : basePath;
+    const revisionFilter = revisionItem.isCurrent
+        ? base
+        : ((_a = (0, utils_1.buildRevisionUrl)(base, revisionItem.revisionDate, versionLink ? undefined : version)) !== null && _a !== void 0 ? _a : base);
     const isActive = (_b = revisionItem.isActive) !== null && _b !== void 0 ? _b : false;
     return (react_1.default.createElement(RevisionItemWrapper, { to: revisionFilter, $isActive: isActive },
         react_1.default.createElement(RevisionNameRow, null,
@@ -34,11 +40,17 @@ const RevisionItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
   padding-left: var(--catalog-history-sidebar-revisions-padding-left);
   border-radius: var(--catalog-history-sidebar-revision-item-border-radius);
   transition: 0.2s ease;
-  text-decoration: none;
   color: inherit;
   cursor: pointer;
   background-color: ${({ $isActive }) => $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
 
+  &,
+  &:hover,
+  &:focus,
+  &:visited {
+    text-decoration: none;
+  }
+
   &:hover {
     background-color: ${({ $isActive }) => $isActive
     ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.d.ts

@@ -5,5 +5,7 @@ export type CatalogEntityVersionItemProps = {
     basePath: string;
     isExpanded: boolean;
     onToggle: (version: string) => void;
+    /** This version's own page URL (from the host's usePageVersions). */
+    versionLink?: string;
 };
-export declare function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, }: CatalogEntityVersionItemProps): React.ReactElement;
+export declare function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, versionLink, }: CatalogEntityVersionItemProps): React.ReactElement;