@redocly/theme 0.61.0-next.1 → 0.61.0-next.3

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

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformRevisionsToVersionHistory = transformRevisionsToVersionHistory;
+const constants_1 = require("../../core/constants");
+const date_1 = require("./date");
+function compareVersionsDescending(versionA, versionB) {
+    return versionB.localeCompare(versionA, undefined, { numeric: true });
+}
+function extractGroupComparisonData(group) {
+    var _a, _b;
+    const version = group.version;
+    const isNotSpecified = version === constants_1.VERSION_NOT_SPECIFIED;
+    // Get version dates (oldest revision date for each group - the version's creation date)
+    // This ensures versions stay in their original order even when new revisions are added
+    const date = group.singleRevisionDate ||
+        (group.revisions && group.revisions.length > 0
+            ? (_a = group.revisions[group.revisions.length - 1]) === null || _a === void 0 ? void 0 : _a.revisionDate
+            : undefined) ||
+        '';
+    const time = date ? new Date(date).getTime() : 0;
+    const hasCurrent = (_b = group.hasCurrentRevisionFromBackend) !== null && _b !== void 0 ? _b : false;
+    return { version, isNotSpecified, time, hasCurrent };
+}
+function compareVersionGroupsDescending(groupA, groupB) {
+    const { version: versionA, isNotSpecified: isNotSpecifiedA, time: timeA, hasCurrent: hasCurrentA, } = extractGroupComparisonData(groupA);
+    const { version: versionB, isNotSpecified: isNotSpecifiedB, time: timeB, hasCurrent: hasCurrentB, } = extractGroupComparisonData(groupB);
+    // First, compare by version date (oldest first, so most recent versions come first)
+    const dateComparison = timeB - timeA;
+    if (dateComparison !== 0) {
+        return dateComparison;
+    }
+    // If dates are equal, prioritize the one with isCurrent from backend
+    if (hasCurrentA !== hasCurrentB) {
+        return hasCurrentB ? 1 : -1; // hasCurrentB comes first if true
+    }
+    // If both have same isCurrent status, compare by version
+    // If both are unknown or both are real versions, compare by version
+    if (isNotSpecifiedA === isNotSpecifiedB) {
+        return compareVersionsDescending(versionA, versionB);
+    }
+    // If one is unknown and one is a real version, unknown comes last
+    return isNotSpecifiedA ? 1 : -1;
+}
+function transformRevisionsToVersionHistory({ revisions, currentRevisionDate, currentVersion, locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US', }) {
+    const normalizedCurrentVersion = currentVersion === null ? constants_1.VERSION_NOT_SPECIFIED : currentVersion;
+    const versionMap = new Map();
+    revisions.forEach((revision) => {
+        const version = revision.version || constants_1.VERSION_NOT_SPECIFIED;
+        const versionRevisions = versionMap.get(version) || [];
+        versionRevisions.push(revision);
+        if (!versionMap.has(version)) {
+            versionMap.set(version, versionRevisions);
+        }
+    });
+    const versionGroups = Array.from(versionMap.entries()).map(([version, versionRevisions]) => {
+        var _a, _b, _c;
+        const sortedRevisions = [...versionRevisions].sort((a, b) => {
+            const dateA = a.revision ? new Date(a.revision).getTime() : 0;
+            const dateB = b.revision ? new Date(b.revision).getTime() : 0;
+            return dateB - dateA;
+        });
+        const latestRevision = sortedRevisions[0];
+        const versionMatches = normalizedCurrentVersion === undefined || normalizedCurrentVersion === version;
+        let isCurrent;
+        if (currentRevisionDate !== undefined) {
+            // Check if revision matches AND version matches
+            const revisionMatches = sortedRevisions.some((rev) => rev.revision === currentRevisionDate);
+            isCurrent = revisionMatches && versionMatches;
+        }
+        else {
+            // When no revision is specified, use isCurrent flag from the latest revision
+            // but only if version also matches (or no version filter is applied)
+            isCurrent = ((_a = latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.isCurrent) !== null && _a !== void 0 ? _a : false) && versionMatches;
+        }
+        // Check if any revision in this version group is the default version
+        const isDefaultVersion = sortedRevisions.some((rev) => rev.isDefaultVersion === true);
+        const revisions = sortedRevisions.length > 1
+            ? sortedRevisions.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.${sortedRevisions.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;
+        return {
+            version,
+            date: (0, date_1.toLocalizedShortDate)((latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.revision) || null, locale),
+            isCurrent,
+            isExpanded: isCurrent,
+            hasCurrentRevisionFromBackend: (_b = latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.isCurrent) !== null && _b !== void 0 ? _b : false,
+            isDefaultVersion,
+            revisions,
+            singleRevisionDate: sortedRevisions.length === 1 ? (_c = sortedRevisions[0]) === null || _c === void 0 ? void 0 : _c.revision : undefined,
+        };
+    });
+    return versionGroups.sort(compareVersionGroupsDescending);
+}
+//# sourceMappingURL=transform-revisions-to-version-history.js.map

package/lib/icons/NavaidMilitaryIcon/NavaidMilitaryIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const NavaidMilitaryIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/NavaidMilitaryIcon/NavaidMilitaryIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavaidMilitaryIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, props),
+        react_1.default.createElement("path", { d: "M8 15C6.61553 15 5.26216 14.5895 4.11101 13.8203C2.95987 13.0511 2.06266 11.9579 1.53285 10.6788C1.00303 9.3997 0.86441 7.99224 1.13451 6.63437C1.4046 5.2765 2.07129 4.02922 3.05026 3.05026C4.02922 2.07129 5.2765 1.4046 6.63437 1.13451C7.99224 0.86441 9.3997 1.00303 10.6788 1.53285C11.9579 2.06266 13.0511 2.95987 13.8203 4.11101C14.5895 5.26216 15 6.61553 15 8C14.9979 9.85588 14.2597 11.6351 12.9474 12.9474C11.6351 14.2597 9.85588 14.9979 8 15ZM8 2C6.81332 2 5.65328 2.3519 4.66658 3.01119C3.67989 3.67047 2.91085 4.60755 2.45673 5.7039C2.0026 6.80026 1.88378 8.00666 2.11529 9.17054C2.3468 10.3344 2.91825 11.4035 3.75736 12.2426C4.59648 13.0818 5.66558 13.6532 6.82946 13.8847C7.99335 14.1162 9.19975 13.9974 10.2961 13.5433C11.3925 13.0892 12.3295 12.3201 12.9888 11.3334C13.6481 10.3467 14 9.18669 14 8C13.9982 6.40926 13.3655 4.88419 12.2406 3.75936C11.1158 2.63454 9.59075 2.00182 8 2Z", fill: "#1A1C21" }),
+        react_1.default.createElement("path", { d: "M8 12C7.20888 12 6.43552 11.7654 5.77772 11.3259C5.11993 10.8864 4.60724 10.2616 4.30449 9.53074C4.00173 8.79983 3.92252 7.99557 4.07686 7.21964C4.2312 6.44372 4.61217 5.73099 5.17158 5.17158C5.73099 4.61217 6.44372 4.2312 7.21964 4.07686C7.99557 3.92252 8.79983 4.00173 9.53074 4.30449C10.2616 4.60724 10.8864 5.11993 11.3259 5.77772C11.7654 6.43552 12 7.20888 12 8C11.9988 9.0605 11.577 10.0772 10.8271 10.8271C10.0772 11.577 9.0605 11.9988 8 12ZM8 5C7.40666 5 6.82664 5.17595 6.33329 5.50559C5.83994 5.83524 5.45543 6.30377 5.22836 6.85195C5.0013 7.40013 4.94189 8.00333 5.05765 8.58527C5.1734 9.16722 5.45913 9.70177 5.87868 10.1213C6.29824 10.5409 6.83279 10.8266 7.41473 10.9424C7.99668 11.0581 8.59988 10.9987 9.14805 10.7716C9.69623 10.5446 10.1648 10.1601 10.4944 9.66671C10.8241 9.17337 11 8.59335 11 8C10.9991 7.20463 10.6828 6.44208 10.1203 5.87966C9.55793 5.31725 8.79538 5.00089 8 5Z", fill: "#1A1C21" }),
+        react_1.default.createElement("path", { d: "M8 9C8.55229 9 9 8.55229 9 8C9 7.44772 8.55229 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9Z", fill: "#1A1C21" })));
+};
+exports.NavaidMilitaryIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/NavaidMilitaryIcon/NavaidMilitaryIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=NavaidMilitaryIcon.js.map

package/lib/index.d.ts

@@ -115,6 +115,8 @@ export * from './components/Catalog/CatalogSelector';
 export * from './components/Catalog/CatalogSortButton';
 export * from './components/Catalog/CatalogTagsWithTooltip';
 export * from './components/Catalog/CatalogViewModeToggle';
+export * from './components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton';
+export * from './components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
 export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';
 export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';

package/lib/index.js

@@ -173,6 +173,8 @@ __exportStar(require("./components/Catalog/CatalogSelector"), exports);
 __exportStar(require("./components/Catalog/CatalogSortButton"), exports);
 __exportStar(require("./components/Catalog/CatalogTagsWithTooltip"), exports);
 __exportStar(require("./components/Catalog/CatalogViewModeToggle"), exports);
+__exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton"), exports);
+__exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar"), exports);
 __exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations"), exports);
 __exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations"), exports);
 __exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.61.0-next.1",
+  "version": "0.61.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,8 +29,8 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-router-dom": "^6.21.1",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
@@ -48,7 +48,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/styled-components": "5.1.34",
-    "@vitest/coverage-v8": "^4.0.10",
+    "@vitest/coverage-v8": "4.0.10",
     "@vitest/ui": "3.2.4",
     "concurrently": "7.6.0",
     "react-router-dom": "^6.21.1",
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.0"
+    "@redocly/config": "0.41.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useSearchParams } from 'react-router-dom';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type {
@@ -20,6 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
+import { CatalogEntityHistorySidebar } from '@redocly/theme';
 
 export type CatalogEntityProps = {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -93,6 +94,10 @@ export function CatalogEntity({
   const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } =
     usePageProps<CatalogEntityPageProps>();
 
+  const [searchParams] = useSearchParams();
+  const revision = searchParams.get('revision') || undefined;
+  const version = searchParams.get('version') || undefined;
+
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
 
@@ -100,6 +105,7 @@ export function CatalogEntity({
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
+      <CatalogEntityHistorySidebar entityKey={entity.key} revision={revision} version={version} />
       <CatalogPageContent>
         <Breadcrumbs
           additionalBreadcrumbs={[

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.tsx

@@ -32,8 +32,20 @@ export function CatalogEntityRelationsGraph({
 }: CatalogEntityRelationsGraphProps): JSX.Element {
   const { useFetchCatalogEntitiesRelations } = useThemeHooks();
   const { activeColorMode } = useColorSwitcher();
+
+  const combinedFilter = useMemo(() => {
+    if (entity.version && entity.revision) {
+      const versionFilter = `version:"${entity.version}"`;
+      const revisionFilter = `revision:"${entity.revision}"`;
+      return `${versionFilter} AND ${revisionFilter}`;
+    }
+
+    return undefined;
+  }, [entity.version, entity.revision]);
+
   const { items: allRelations } = useFetchCatalogEntitiesRelations({
     entityKey: entity.key,
+    filter: combinedFilter,
   });
 
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useGraph({

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

@@ -0,0 +1,147 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { RecentlyViewedIcon } from '@redocly/theme/icons/RecentlyViewedIcon/RecentlyViewedIcon';
+import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
+
+export type CatalogHistoryButtonProps = {
+  version: string | null;
+  className?: string;
+};
+
+export function CatalogEntityHistoryButton({
+  version,
+  className,
+}: CatalogHistoryButtonProps): React.ReactElement {
+  const [label, setLabel] = useState(version === VERSION_NOT_SPECIFIED ? null : version);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const handleClose = useCallback(
+    (e: CustomEvent): void => {
+      setLabel(
+        e.detail.version === VERSION_NOT_SPECIFIED
+          ? e.detail.revision || 'r.1'
+          : `${e.detail.version || version}, ${e.detail.revision || 'r.1'}`,
+      );
+    },
+    [version],
+  );
+
+  useEffect(() => {
+    window.addEventListener('portal:sidebar:close-version-history', (e) =>
+      handleClose(e as CustomEvent),
+    );
+
+    return () => {
+      window.removeEventListener('portal:sidebar:close-version-history', (e) =>
+        handleClose(e as CustomEvent),
+      );
+    };
+  }, [handleClose]);
+
+  const handleClick = (): void => {
+    window.dispatchEvent(new CustomEvent('portal:sidebar:open-version-history'));
+  };
+
+  return (
+    <CatalogHistoryButtonWrapper
+      className={className}
+      data-component-name="Catalog/CatalogHistoryButton"
+    >
+      <Separator />
+      <HistoryItem onClick={handleClick}>
+        <HistoryIcon />
+        <HistoryContent>
+          <HistoryText>{translate('catalog.history.button.label', 'Version history')}</HistoryText>
+          {label && (
+            <VersionPill>
+              <CheckmarkIcon />
+              <span>{label}</span>
+            </VersionPill>
+          )}
+        </HistoryContent>
+      </HistoryItem>
+    </CatalogHistoryButtonWrapper>
+  );
+}
+
+const CatalogHistoryButtonWrapper = styled.div`
+  width: 100%;
+`;
+
+const Separator = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: var(--catalog-history-separator-border-color);
+  margin-bottom: var(--catalog-history-separator-margin-bottom);
+  flex-shrink: 0;
+`;
+
+const HistoryItem = styled.button`
+  all: unset;
+  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: 100%;
+  border-radius: var(--catalog-history-item-border-radius);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--catalog-history-item-bg-color-hover);
+  }
+`;
+
+const HistoryContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  gap: var(--catalog-history-item-gap);
+`;
+
+const HistoryText = styled.span`
+  font-family: var(--catalog-history-text-font-family);
+  font-size: var(--catalog-history-text-font-size);
+  font-weight: var(--catalog-history-text-font-weight);
+  line-height: var(--catalog-history-text-line-height);
+  color: var(--catalog-history-text-color);
+  flex: 1;
+`;
+
+const HistoryIcon = styled(RecentlyViewedIcon)`
+  width: var(--catalog-history-icon-size);
+  height: var(--catalog-history-icon-size);
+  flex-shrink: 0;
+`;
+
+const VersionPill = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-history-pill-gap);
+  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);
+  background-color: transparent;
+  flex-shrink: 0;
+
+  span {
+    font-family: var(--catalog-history-pill-font-family);
+    font-size: var(--catalog-history-pill-font-size);
+    line-height: var(--catalog-history-pill-line-height);
+    color: var(--catalog-history-pill-text-color);
+  }
+`;
+
+const CheckmarkIcon = styled(CheckmarkOutlineIcon)`
+  width: var(--catalog-history-pill-icon-size);
+  height: var(--catalog-history-pill-icon-size);
+  color: var(--catalog-history-pill-icon-color);
+`;

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

@@ -0,0 +1,180 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
+import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
+
+import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
+
+export type CatalogHistorySidebarProps = {
+  entityKey: string;
+  revision?: string;
+  version?: string | null;
+  className?: string;
+};
+
+export function CatalogEntityHistorySidebar({
+  entityKey,
+  revision,
+  version,
+  className,
+}: CatalogHistorySidebarProps): React.ReactElement | null {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+  const basePath = location.pathname;
+  const { useTranslate, useFetchCatalogEntityRevisions, useL10nConfig } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { currentLocale } = useL10nConfig();
+
+  const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
+
+  const versionHistoryItems = useMemo(
+    () =>
+      transformRevisionsToVersionHistory({
+        revisions,
+        currentRevisionDate: revision,
+        currentVersion: version,
+        locale: currentLocale,
+      }),
+    [revisions, revision, version, currentLocale],
+  );
+  const activeRevisionLabel = useMemo(() => {
+    const itemWithActiveRevision = versionHistoryItems.find((item) =>
+      item.revisions?.some((revision) => revision.isActive),
+    );
+    const activeRevision = itemWithActiveRevision?.revisions?.find((revision) => revision.isActive);
+    return activeRevision?.name;
+  }, [versionHistoryItems]);
+
+  const [expandedVersions, setExpandedVersions] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    setExpandedVersions(
+      new Set(versionHistoryItems.filter((item) => item.isExpanded).map((item) => item.version)),
+    );
+  }, [versionHistoryItems]);
+
+  const handleOpenSidebar = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
+
+    return () => {
+      window.removeEventListener('portal:sidebar:open-version-history', handleOpenSidebar);
+    };
+  }, [handleOpenSidebar]);
+
+  const handleClose = (): void => {
+    window.dispatchEvent(
+      new CustomEvent('portal:sidebar:close-version-history', {
+        detail: { version, revision: activeRevisionLabel },
+      }),
+    );
+    setIsOpen(false);
+  };
+
+  const toggleVersion = (version: string): void => {
+    setExpandedVersions((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(version)) {
+        newSet.delete(version);
+      } else {
+        newSet.add(version);
+      }
+      return newSet;
+    });
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <SidebarOverlay className={className} data-component-name="Catalog/CatalogHistorySidebar">
+      <SidebarHeader>
+        <HeaderTitle>{translate('catalog.history.sidebar.title', 'Version history')}</HeaderTitle>
+        <CloseButton
+          onClick={handleClose}
+          aria-label={translate('catalog.history.sidebar.close', 'Close version history')}
+        >
+          <CloseIcon size="20px" color="--catalog-history-sidebar-close-icon-color" />
+        </CloseButton>
+      </SidebarHeader>
+
+      <MenuContainer growContent>
+        <VersionList>
+          {versionHistoryItems.map((group) => (
+            <CatalogEntityVersionItem
+              key={group.version}
+              group={group}
+              basePath={basePath}
+              isExpanded={expandedVersions.has(group.version)}
+              onToggle={toggleVersion}
+            />
+          ))}
+        </VersionList>
+      </MenuContainer>
+    </SidebarOverlay>
+  );
+}
+
+const SidebarOverlay = styled.div`
+  position: fixed;
+  top: var(--navbar-height);
+  left: 0;
+  width: var(--sidebar-width);
+  height: calc(100vh - var(--navbar-height));
+  background-color: var(--catalog-history-sidebar-bg-color);
+  border-right: 1px solid var(--catalog-history-sidebar-border-color);
+  display: flex;
+  flex-direction: column;
+  z-index: calc(var(--z-index-raised) - 1);
+  overflow: hidden;
+`;
+
+const SidebarHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-history-sidebar-header-padding);
+  border-bottom: 1px solid var(--catalog-history-sidebar-border-color);
+  flex-shrink: 0;
+`;
+
+const HeaderTitle = styled.h2`
+  margin: 0;
+  font-family: var(--catalog-history-sidebar-header-font-family);
+  font-size: var(--catalog-history-sidebar-header-font-size);
+  font-weight: var(--catalog-history-sidebar-header-font-weight);
+  line-height: var(--catalog-history-sidebar-header-line-height);
+  letter-spacing: var(--catalog-history-sidebar-header-letter-spacing);
+  color: var(--catalog-history-sidebar-header-color);
+`;
+
+const CloseButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-history-sidebar-close-button-size);
+  height: var(--catalog-history-sidebar-close-button-size);
+  cursor: pointer;
+  border-radius: var(--catalog-history-sidebar-close-button-border-radius);
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--catalog-history-sidebar-close-button-bg-color-hover);
+  }
+`;
+
+const VersionList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: var(--catalog-history-sidebar-content-padding);
+  margin-top: var(--catalog-history-sidebar-content-margin-top);
+`;