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

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);
+`;

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { CatalogEntityRevision } from '@redocly/theme/core/types';
+
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { buildRevisionUrl } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type CatalogEntityRevisionItemProps = {
+  revisionItem: CatalogEntityRevision;
+  basePath: string;
+  version?: string | null;
+};
+
+export function CatalogEntityRevisionItem({
+  revisionItem,
+  basePath,
+  version,
+}: CatalogEntityRevisionItemProps): React.ReactElement {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const revisionFilter = buildRevisionUrl(basePath, revisionItem.revisionDate, version) ?? basePath;
+  const isActive = revisionItem.isActive ?? false;
+
+  return (
+    <RevisionItemWrapper to={revisionFilter} $isActive={isActive}>
+      <RevisionNameRow>
+        <RevisionName>{revisionItem.name}</RevisionName>
+        {revisionItem.isCurrent && (
+          <Tag
+            color="grey"
+            borderless
+            textTransform="none"
+            style={{
+              fontSize: 'var(--font-size-xs)',
+              borderRadius: 'var(--catalog-history-sidebar-revision-tag-border-radius)',
+            }}
+          >
+            {translate('catalog.history.revision.current', 'current')}
+          </Tag>
+        )}
+      </RevisionNameRow>
+      <RevisionDate>{revisionItem.date}</RevisionDate>
+    </RevisionItemWrapper>
+  );
+}
+
+const RevisionItemWrapper = styled(Link)<{ $isActive?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  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 {
+    background-color: ${({ $isActive }) =>
+      $isActive
+        ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
+        : 'var(--catalog-history-sidebar-revision-item-bg-color-hover)'};
+  }
+`;
+
+const RevisionNameRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+
+const RevisionName = styled.span`
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--catalog-history-sidebar-revision-name-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revision-name-color);
+`;
+
+const RevisionDate = styled.span`
+  font-family: var(--catalog-history-sidebar-revision-date-font-family);
+  font-size: var(--catalog-history-sidebar-revision-date-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-date-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-date-line-height);
+  color: var(--catalog-history-sidebar-revision-date-color);
+`;

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

@@ -0,0 +1,284 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { CatalogEntityVersionHistoryGroup } from '@redocly/theme/core/types';
+
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { NavaidMilitaryIcon } from '@redocly/theme/icons/NavaidMilitaryIcon/NavaidMilitaryIcon';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
+import { CatalogEntityRevisionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem';
+import { buildRevisionUrl } from '@redocly/theme/core/utils';
+import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
+
+const MAX_INITIAL_REVISIONS = 5;
+const MAX_REVISIONS = 20;
+
+export type CatalogEntityVersionItemProps = {
+  group: CatalogEntityVersionHistoryGroup;
+  basePath: string;
+  isExpanded: boolean;
+  onToggle: (version: string) => void;
+};
+
+export function CatalogEntityVersionItem({
+  group,
+  basePath,
+  isExpanded,
+  onToggle,
+}: CatalogEntityVersionItemProps): React.ReactElement {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [showAllRevisions, setShowAllRevisions] = useState(false);
+
+  const revisions = group.revisions || [];
+  const hasRevisions = revisions.length > 0;
+  const hasMoreThanMax = revisions.length > MAX_INITIAL_REVISIONS;
+  const hasMoreThanLimit = revisions.length > MAX_REVISIONS;
+  const displayedRevisions = showAllRevisions
+    ? revisions.slice(0, MAX_REVISIONS)
+    : revisions.slice(0, MAX_INITIAL_REVISIONS);
+
+  useEffect(() => {
+    if (!isExpanded) {
+      setShowAllRevisions(false);
+    }
+  }, [isExpanded]);
+
+  const isNotSpecifiedVersion = group.version === VERSION_NOT_SPECIFIED;
+
+  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}`;
+
+  const versionButton = (
+    <VersionButton
+      type="button"
+      onClick={() => hasRevisions && onToggle(group.version)}
+      $isClickable={isClickable}
+      $isCurrent={group.isCurrent}
+      $isActive={isSingleRevisionActive}
+    >
+      <VersionIcon $isCurrent={group.isCurrent}>
+        {group.isCurrent ? (
+          <CheckmarkOutlineIcon
+            size="16px"
+            color="--catalog-history-sidebar-version-icon-color-current"
+          />
+        ) : (
+          <NavaidMilitaryIcon size="16px" color="--catalog-history-sidebar-version-icon-color" />
+        )}
+      </VersionIcon>
+      <VersionInfo>
+        <VersionTitleRow>
+          <VersionTitle>{versionTitle}</VersionTitle>
+          {group.isDefaultVersion && (
+            <Tag
+              color="grey"
+              borderless
+              textTransform="none"
+              style={{
+                fontSize: 'var(--font-size-xs)',
+                borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
+                flexShrink: 0,
+              }}
+            >
+              {translate('catalog.history.version.default', 'default')}
+            </Tag>
+          )}
+        </VersionTitleRow>
+        {!isNotSpecifiedVersion && <VersionDate>{group.date}</VersionDate>}
+      </VersionInfo>
+      {hasRevisions && (
+        <ChevronIcon>
+          {isExpanded ? (
+            <ChevronDownIcon size="16px" color="--catalog-history-sidebar-chevron-icon-color" />
+          ) : (
+            <ChevronRightIcon size="16px" color="--catalog-history-sidebar-chevron-icon-color" />
+          )}
+        </ChevronIcon>
+      )}
+    </VersionButton>
+  );
+
+  return (
+    <li>
+      {singleRevisionLink ? <Link to={singleRevisionLink}>{versionButton}</Link> : versionButton}
+
+      {hasRevisions && isExpanded && (
+        <RevisionsList>
+          {displayedRevisions.map((revisionItem) => (
+            <CatalogEntityRevisionItem
+              key={revisionItem.name}
+              revisionItem={revisionItem}
+              basePath={basePath}
+              version={group.version}
+            />
+          ))}
+          {hasMoreThanLimit && showAllRevisions && (
+            <RevisionsLimitMessage>
+              {translate(
+                'catalog.history.revisions.limitMessage',
+                'Older revisions are not stored.',
+              )}
+            </RevisionsLimitMessage>
+          )}
+          {hasMoreThanMax && (
+            <ShowMoreButton
+              onClick={() => setShowAllRevisions(!showAllRevisions)}
+              isExpanded={showAllRevisions}
+            >
+              {showAllRevisions
+                ? translate('catalog.history.revisions.showLess', 'Show less')
+                : translate('catalog.history.revisions.showMore', {
+                    defaultValue: 'Show more',
+                    count: Math.min(
+                      revisions.length - MAX_INITIAL_REVISIONS,
+                      MAX_REVISIONS - MAX_INITIAL_REVISIONS,
+                    ),
+                  })}
+            </ShowMoreButton>
+          )}
+        </RevisionsList>
+      )}
+    </li>
+  );
+}
+
+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')};
+  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'};
+
+  ${({ $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)'
+      };
+    }
+  `}
+
+  ${({ $isCurrent }) =>
+    !$isCurrent &&
+    `
+    &:hover ${VersionIcon} {
+      background-color: var(--color-static-white);
+    }
+  `}
+`;
+
+const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-history-sidebar-version-icon-size);
+  height: var(--catalog-history-sidebar-version-icon-size);
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-color: ${({ $isCurrent }) =>
+    $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+  transition: background-color 0.2s ease;
+  margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
+
+  svg path {
+    transition: fill 0.2s ease;
+  }
+`;
+
+const VersionInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--catalog-history-sidebar-version-info-gap);
+`;
+
+const VersionTitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+
+const VersionTitle = styled.span`
+  font-family: var(--catalog-history-sidebar-version-title-font-family);
+  font-size: var(--catalog-history-sidebar-version-title-font-size);
+  font-weight: var(--catalog-history-sidebar-version-title-font-weight);
+  line-height: var(--catalog-history-sidebar-version-title-line-height);
+  color: var(--catalog-history-sidebar-version-title-color);
+  flex-shrink: 1;
+  min-width: 0;
+`;
+
+const VersionDate = styled.span`
+  font-family: var(--catalog-history-sidebar-version-date-font-family);
+  font-size: var(--catalog-history-sidebar-version-date-font-size);
+  font-weight: var(--catalog-history-sidebar-version-date-font-weight);
+  line-height: var(--catalog-history-sidebar-version-date-line-height);
+  color: var(--catalog-history-sidebar-version-date-color);
+`;
+
+const ChevronIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+`;
+
+const RevisionsList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 22px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(
+      --catalog-history-sidebar-revision-line-color,
+      var(--border-color-secondary)
+    );
+  }
+`;
+
+const RevisionsLimitMessage = styled.div`
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revisions-limit-message-color);
+  text-align: center;
+`;

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

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
 
 const MAX_INITIAL_ITEMS = 4;
 
@@ -67,8 +67,8 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
         />
       ))}
       {hasMoreItems && (
-        <ShowMoreButton onClick={() => setIsOn(!isOn)}>
-          {isOn ? 'Show less' : 'Show more'} <ChevronIcon $isExpanded={isOn} />
+        <ShowMoreButton onClick={() => setIsOn(!isOn)} isExpanded={isOn}>
+          {isOn ? 'Show less' : 'Show more'}
         </ShowMoreButton>
       )}
     </MetadataWrapper>
@@ -108,25 +108,3 @@ const Heading = styled.h2`
   margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;
-
-const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
-  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
-  transition: transform 0.2s ease;
-`;
-
-const ShowMoreButton = styled.button`
-  background: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-metadata-button-gap, 0.5rem);
-  cursor: pointer;
-  color: var(--catalog-metadata-button-color);
-  padding: 0;
-  font-weight: var(--font-weight-medium);
-  margin-top: var(--spacing-unit);
-
-  &:hover {
-    color: var(--catalog-metadata-button-color-hover);
-  }
-`;

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

@@ -1,4 +1,4 @@
-import React, { JSX, useState, useEffect } from 'react';
+import React, { JSX, useState, useEffect, useMemo } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
@@ -40,12 +40,25 @@ export function CatalogEntityRelations({
     setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
   }, [entity.key]);
 
+  const combinedFilter = useMemo(() => {
+    const baseFilter = filter ?? ENTITY_DEFAULT_FILTERS[entity.type];
+    if (entity.version && entity.revision) {
+      const versionFilter = `version:"${entity.version}"`;
+      const revisionFilter = `revision:"${entity.revision}"`;
+      return baseFilter
+        ? `${baseFilter} AND ${versionFilter} AND ${revisionFilter}`
+        : `${versionFilter} AND ${revisionFilter}`;
+    }
+
+    return baseFilter;
+  }, [filter, entity.version, entity.type, entity.revision]);
+
   const { items: relations, query } = useFetchCatalogEntitiesRelations(
     {
       entityKey: entity.key,
       search: searchQuery,
       sort: sortOption ?? undefined,
-      filter: filter ?? ENTITY_DEFAULT_FILTERS[entity.type],
+      filter: combinedFilter,
       limit: 10,
     },
     initialRelations,

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export type ShowMoreButtonProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+  className?: string;
+  isExpanded?: boolean;
+};
+
+export function ShowMoreButton({
+  onClick,
+  children,
+  className,
+  isExpanded = false,
+}: ShowMoreButtonProps): React.ReactElement {
+  return (
+    <BaseShowMoreButton type="button" onClick={onClick} className={className}>
+      {children}
+      <ChevronIcon $isExpanded={isExpanded} />
+    </BaseShowMoreButton>
+  );
+}
+
+const BaseShowMoreButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  gap: var(--catalog-show-more-button-gap);
+  color: var(--catalog-show-more-button-color);
+  padding: 0;
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-show-more-button-color-hover);
+  }
+`;
+
+const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;