@redocly/theme 0.63.0-next.5 → 0.63.0

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { customCatalogOptionsCasing } from '@redocly/theme/core/utils';
+
+export type CatalogEntityRelationsNodeContentProps = {
+  entityType: string;
+  label: string;
+  isRoot: boolean;
+};
+
+export function CatalogEntityRelationsNodeContent({
+  entityType,
+  label,
+  isRoot,
+}: CatalogEntityRelationsNodeContentProps): React.ReactElement {
+  const formattedEntityType = customCatalogOptionsCasing(entityType);
+
+  return (
+    <CatalogEntityRelationsNodeContentWrapper
+      isRoot={isRoot}
+      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent"
+    >
+      <CatalogEntityRelationsNodeTypeRow isRoot={isRoot}>
+        {isRoot ? (
+          <CatalogEntityIcon
+            entityType={entityType}
+            forceColor="var(--catalog-entity-relations-node-root-icon-color)"
+          />
+        ) : (
+          <CatalogEntityIcon entityType={entityType} defaultColor={false} />
+        )}
+        <span>{formattedEntityType}</span>
+      </CatalogEntityRelationsNodeTypeRow>
+      <CatalogEntityRelationsNodeLabelRow isRoot={isRoot}>
+        {label}
+      </CatalogEntityRelationsNodeLabelRow>
+    </CatalogEntityRelationsNodeContentWrapper>
+  );
+}
+
+const CatalogEntityRelationsNodeTypeRow = styled.div<{ isRoot: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  line-height: var(--line-height-sm);
+  font-size: var(--font-size-sm);
+  color: ${({ isRoot }) =>
+    isRoot
+      ? 'var(--catalog-entity-relations-node-root-text-color)'
+      : 'var(--text-color-description)'};
+`;
+
+const CatalogEntityRelationsNodeLabelRow = styled.div<{ isRoot: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  line-height: var(--line-height-lg);
+  font-size: var(--font-size-lg);
+  color: ${({ isRoot }) =>
+    isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
+`;
+
+const CatalogEntityRelationsNodeContentWrapper = styled.div<{ isRoot: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight);
+  background: ${({ isRoot }) =>
+    isRoot
+      ? 'var(--catalog-entity-relations-node-root-bg-color)'
+      : 'var(--catalog-entity-relations-node-bg-color)'};
+  border: ${({ isRoot }) =>
+    isRoot
+      ? 'none'
+      : `var(--catalog-entity-relations-node-border-width) var(--catalog-entity-relations-node-border-style) var(--catalog-entity-relations-node-border-color)`};
+`;

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Handle, Position } from '@xyflow/react';
-import styled from 'styled-components';
 
-import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
+import { CatalogEntityRelationsNodeContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent';
 
 export type CatalogEntityRelationsRootNodeProps = {
   label: string;
@@ -17,33 +16,16 @@ export function CatalogEntityRelationsRootNode({
   className,
 }: CatalogEntityRelationsRootNodeProps): React.ReactElement {
   return (
-    <RelationsRootNodeWrapper
+    <div
       className={className}
       data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode"
     >
-      <CatalogEntityIcon
-        entityType={entityType}
-        forceColor="var(--catalog-entity-relations-node-root-icon-color)"
-      />
-      <div>{label}</div>
+      <CatalogEntityRelationsNodeContent entityType={entityType} label={label} isRoot={true} />
       <Handle
         type={GraphHandleType.Source}
         position={Position.Bottom}
         id={GraphHandleType.Source}
       />
-    </RelationsRootNodeWrapper>
+    </div>
   );
 }
-
-const RelationsRootNodeWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-entity-relations-node-gap);
-  padding: var(--catalog-entity-relations-node-padding);
-  border-radius: var(--catalog-entity-relations-node-border-radius);
-  font-style: normal;
-  font-weight: var(--catalog-entity-relations-node-font-weight-root);
-  background: var(--catalog-entity-relations-node-root-bg-color);
-  color: var(--catalog-entity-relations-node-root-text-color);
-  border: none;
-`;

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

@@ -5,6 +5,8 @@ import { RecentlyViewedIcon } from '@redocly/theme/icons/RecentlyViewedIcon/Rece
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useIsTruncated } from '@redocly/theme/core/hooks';
 
 export type CatalogHistoryButtonProps = {
   version: string | null;
@@ -18,6 +20,7 @@ export function CatalogEntityHistoryButton({
   const [label, setLabel] = useState(version === VERSION_NOT_SPECIFIED ? null : version);
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const [labelRef, isLabelTruncated] = useIsTruncated<HTMLSpanElement>(label);
 
   const handleClose = useCallback(
     (e: CustomEvent): void => {
@@ -57,10 +60,19 @@ export function CatalogEntityHistoryButton({
         <HistoryContent>
           <HistoryText>{translate('catalog.history.button.label', 'Version history')}</HistoryText>
           {label && (
-            <VersionPill>
-              <CheckmarkIcon />
-              <span>{label}</span>
-            </VersionPill>
+            <Tooltip
+              tip={label}
+              placement="bottom"
+              arrowPosition="left"
+              disabled={!isLabelTruncated}
+            >
+              <VersionPillWrapper>
+                <VersionPill>
+                  <CheckmarkIcon />
+                  <span ref={labelRef}>{label}</span>
+                </VersionPill>
+              </VersionPillWrapper>
+            </Tooltip>
           )}
         </HistoryContent>
       </HistoryItem>
@@ -69,7 +81,7 @@ export function CatalogEntityHistoryButton({
 }
 
 const CatalogHistoryButtonWrapper = styled.div`
-  width: 100%;
+  width: var(--catalog-history-button-width);
 `;
 
 const Separator = styled.div`
@@ -88,7 +100,7 @@ const HistoryItem = styled.button`
   gap: var(--catalog-history-item-gap);
   padding: var(--catalog-history-item-padding);
   margin-bottom: var(--catalog-history-item-margin-bottom);
-  width: 100%;
+  width: var(--catalog-history-button-item-width);
   border-radius: var(--catalog-history-item-border-radius);
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -100,19 +112,29 @@ const HistoryItem = styled.button`
 
 const HistoryContent = styled.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.span`
+  flex: 0 0 auto;
   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;
+  white-space: nowrap;
+`;
+
+const VersionPillWrapper = styled.div`
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: var(--catalog-history-content-max-width);
 `;
 
 const HistoryIcon = styled(RecentlyViewedIcon)`
@@ -125,23 +147,30 @@ 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);
+  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;
+  min-width: 0;
+  max-width: 100%;
 
   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);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
 `;
 
 const CheckmarkIcon = styled(CheckmarkOutlineIcon)`
   width: var(--catalog-history-pill-icon-size);
   height: var(--catalog-history-pill-icon-size);
+  min-width: var(--catalog-history-pill-icon-size);
+  min-height: var(--catalog-history-pill-icon-size);
+  flex-shrink: 0;
   color: var(--catalog-history-pill-icon-color);
 `;

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

@@ -8,6 +8,7 @@ import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
 import { CatalogEntityVersionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem';
+import { RecentlyViewedIcon } from '@redocly/theme/icons/RecentlyViewedIcon/RecentlyViewedIcon';
 
 export type CatalogHistorySidebarProps = {
   entityKey: string;
@@ -100,7 +101,10 @@ export function CatalogEntityHistorySidebar({
   return (
     <SidebarOverlay className={className} data-component-name="Catalog/CatalogHistorySidebar">
       <SidebarHeader>
-        <HeaderTitle>{translate('catalog.history.sidebar.title', 'Version history')}</HeaderTitle>
+        <HeaderWrapper>
+          <HistoryIcon />
+          <HeaderTitle>{translate('catalog.history.sidebar.title', 'Version history')}</HeaderTitle>
+        </HeaderWrapper>
         <CloseButton
           onClick={handleClose}
           aria-label={translate('catalog.history.sidebar.close', 'Close version history')}
@@ -128,10 +132,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height, 0));
+  top: calc(var(--navbar-height) + var(--banner-height));
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height, 0));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;
@@ -181,3 +185,15 @@ const VersionList = styled.ul`
   padding: var(--catalog-history-sidebar-content-padding);
   margin-top: var(--catalog-history-sidebar-content-margin-top);
 `;
+
+const HistoryIcon = styled(RecentlyViewedIcon)`
+  width: var(--catalog-history-icon-size);
+  height: var(--catalog-history-icon-size);
+  flex-shrink: 0;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;

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

@@ -54,8 +54,8 @@ export function CatalogEntityVersionItem({
   const singleRevisionLink = buildRevisionUrl(basePath, group.singleRevisionDate, group.version);
 
   const versionTitle = isNotSpecifiedVersion
-    ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
-    : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
+    ? `${translate('catalog.history.version.label', 'Version')}:\u00a0${translate('catalog.history.version.notSpecified', 'not specified')}`
+    : `${translate('catalog.history.version.label', 'Version')}:\u00a0${group.version}`;
 
   const versionButton = (
     <VersionButton
@@ -80,11 +80,12 @@ export function CatalogEntityVersionItem({
             <Tag
               color="grey"
               borderless
-              textTransform="none"
+              textTransform="lowercase"
               style={{
                 fontSize: 'var(--font-size-xs)',
                 borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
                 flexShrink: 0,
+                marginLeft: 'var(--spacing-xxs)',
               }}
             >
               {translate('catalog.history.version.default', 'default')}
@@ -216,6 +217,8 @@ const VersionTitle = styled.span`
   color: var(--catalog-history-sidebar-version-title-color);
   flex-shrink: 1;
   min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
 `;
 
 const VersionDate = styled.span`
@@ -239,6 +242,7 @@ const RevisionsList = styled.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  padding-bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
   position: relative;
 
   &::before {
@@ -246,7 +250,7 @@ const RevisionsList = styled.ul`
     position: absolute;
     left: 22px;
     top: 0;
-    bottom: 0;
+    bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
     width: 1px;
     background-color: var(
       --catalog-history-sidebar-revision-line-color,

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

@@ -10,6 +10,7 @@ import { DomainsProperty } from '@redocly/theme/components/Catalog/CatalogEntity
 import { OwnersProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty';
 import { ContactProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty';
 import { FormatProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty';
+import { breakpoints } from '@redocly/theme/core';
 
 type PropertyRenderer = {
   key: string;
@@ -67,15 +68,8 @@ export type CatalogEntityPropertiesProps = {
 export function CatalogEntityProperties({ entity }: CatalogEntityPropertiesProps): JSX.Element {
   const renderers = propertyRenderers.filter((renderer) => renderer.condition(entity));
 
-  const gridTemplateColumns = [1, 2, 4].includes(renderers.length)
-    ? 'repeat(2, 1fr)'
-    : 'repeat(3, 1fr)';
-
   return (
-    <CatalogEntityPropertiesGridWrapper
-      data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties"
-      gridTemplateColumns={gridTemplateColumns}
-    >
+    <CatalogEntityPropertiesGridWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties">
       {renderers.map((renderer) => (
         <renderer.component key={renderer.key + entity.id} entity={entity} />
       ))}
@@ -83,8 +77,16 @@ export function CatalogEntityProperties({ entity }: CatalogEntityPropertiesProps
   );
 }
 
-const CatalogEntityPropertiesGridWrapper = styled.div<{ gridTemplateColumns: string }>`
+const CatalogEntityPropertiesGridWrapper = styled.div`
   display: grid;
-  grid-template-columns: ${({ gridTemplateColumns }) => gridTemplateColumns};
   gap: var(--spacing-base);
+  grid-template-columns: 1fr;
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 `;

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

@@ -28,7 +28,11 @@ export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
         content={
           <>
             {domains?.map((domain) => (
-              <Tag key={domain?.id} style={{ backgroundColor: 'var(--bg-color)' }}>
+              <Tag
+                key={domain?.id}
+                style={{ backgroundColor: 'var(--bg-color)' }}
+                variant="outline"
+              >
                 <GraphIcon />
                 {domain?.title}
               </Tag>

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

@@ -34,6 +34,7 @@ export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
                   backgroundColor: 'var(--bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
                 }}
+                variant="outline"
               >
                 {owner?.title}
               </Tag>

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

@@ -51,7 +51,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

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

@@ -79,7 +79,7 @@ export function CatalogEntityRelationsTable({
   };
 
   return (
-    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
+    <CatalogEntityRelationsTableWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
       {heading && <Heading>{heading}</Heading>}
       <CatalogActionsRow
         searchQuery={searchQuery}
@@ -103,10 +103,14 @@ export function CatalogEntityRelationsTable({
         listType={listType}
         onRowClick={onRowClick}
       />
-    </div>
+    </CatalogEntityRelationsTableWrapper>
   );
 }
 
+const CatalogEntityRelationsTableWrapper = styled.div`
+  min-width: 0;
+`;
+
 const Heading = styled.h2`
   margin: var(--spacing-base) 0;
   font-size: var(--font-size-md);

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

@@ -1,4 +1,5 @@
 import React, { JSX } from 'react';
+import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
@@ -48,7 +49,7 @@ export function CatalogEntityRelationsTableContent({
   onRowClick,
 }: CatalogEntityRelationsTableContentProps): JSX.Element {
   return (
-    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent">
+    <TableContentWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent">
       <HighlightContext.Provider value={[searchQuery]}>
         {relations.length > 0 ? (
           <CatalogTableView
@@ -62,6 +63,7 @@ export function CatalogEntityRelationsTableContent({
             isColumnSorted={isColumnSorted}
             style={{ marginTop: 0 }}
             onRowClick={onRowClick}
+            contentMinWidth={TABLE_SCROLL_MIN_WIDTH_PX}
           />
         ) : (
           <CatalogEntitiesEmptyState listType={listType} />
@@ -76,6 +78,12 @@ export function CatalogEntityRelationsTableContent({
           label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
         />
       )}
-    </div>
+    </TableContentWrapper>
   );
 }
+
+const TABLE_SCROLL_MIN_WIDTH_PX = 608;
+
+const TableContentWrapper = styled.div`
+  min-width: 0; /* Constrain width so table overflow-x scroll works inside tabs */
+`;

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

@@ -79,7 +79,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

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

@@ -122,7 +122,7 @@ const SplitViewWrapper = styled.div`
 const SchemaSampleWrapper = styled.div`
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-md));
+  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -173,5 +173,5 @@ const FilterCheckboxOption = styled(FilterOption)`
 `;
 
 const FilterSearchWrapper = styled.div`
-  padding: var(--filter-content-search-padding);
+  padding-bottom: var(--spacing-xs);
 `;

package/src/components/Catalog/CatalogFilter/CatalogFilterContent.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
 import type { RedoclyConfig } from '@redocly/theme/config';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogFilter } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilter';
+import { breakpoints } from '@redocly/theme/core/utils';
 import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
 
 export type CatalogFilterContentProps = {
@@ -18,6 +19,8 @@ export type CatalogFilterContentProps = {
     | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
     | ((str: string) => string);
   showCounter?: boolean;
+  catalogSelector?: ReactNode;
+  searchInput?: ReactNode;
   className?: string;
 };
 
@@ -27,6 +30,8 @@ export function CatalogFilterContent({
   filterTerm,
   filterValuesCasing,
   showCounter = true,
+  catalogSelector,
+  searchInput,
   className,
 }: CatalogFilterContentProps): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
@@ -50,7 +55,7 @@ export function CatalogFilterContent({
     onClear();
   };
 
-  if (!filters.length) {
+  if (!filters.length && !catalogSelector) {
     return null;
   }
 
@@ -64,12 +69,16 @@ export function CatalogFilterContent({
           {translate('catalog.filters.title', 'Filters')}
         </FiltersTitle>
         {hasActiveFilters ? (
-          <Button size="medium" tone="danger" variant="ghost" onClick={handleClearAll}>
+          <Button size="medium" variant="ghost" onClick={handleClearAll}>
             {translate('catalog.filters.clearAll', 'Clear filters')}
           </Button>
         ) : null}
       </FiltersHeader>
+      {searchInput ? <FiltersSearchWrapper>{searchInput}</FiltersSearchWrapper> : null}
       <FilterItems>
+        {catalogSelector ? (
+          <CatalogSelectorItemWrapper>{catalogSelector}</CatalogSelectorItemWrapper>
+        ) : null}
         {filters.map((filter, idx) => (
           <CatalogFilter
             filter={filter}
@@ -91,8 +100,7 @@ const CatalogFilterContentWrapper = styled.div`
 
 const FiltersHeader = styled.div`
   display: flex;
-  padding: var(--filter-content-header-padding-vertical)
-    var(--filter-content-header-padding-horizontal);
+  padding: var(--catalog-filter-content-header-padding);
 `;
 
 const FiltersTitle = styled.div`
@@ -102,9 +110,25 @@ const FiltersTitle = styled.div`
   line-height: var(--filter-content-title-line-height);
 `;
 
+const CatalogSelectorItemWrapper = styled.div`
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+`;
+
+const FiltersSearchWrapper = styled.div`
+  padding: 0 var(--spacing-base) var(--spacing-base) var(--spacing-base);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: none;
+  }
+`;
+
 const FilterItems = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--border-color-secondary);
+  border-top: 1px solid var(--catalog-table-border-color);
 `;

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.tsx

@@ -0,0 +1,31 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { CatalogMobileFiltersPanelHeader } from '@redocly/theme/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader';
+
+type CatalogMobileFiltersPanelProps = {
+  setMobileFiltersPanelOpen: (open: boolean) => void;
+  filterContent: React.ReactNode;
+};
+
+export function CatalogMobileFiltersPanel({
+  setMobileFiltersPanelOpen,
+  filterContent,
+}: CatalogMobileFiltersPanelProps): JSX.Element {
+  return (
+    <CatalogMobileFiltersPanelWrapper>
+      <CatalogMobileFiltersPanelHeader setMobileFiltersPanelOpen={setMobileFiltersPanelOpen} />
+      {filterContent}
+    </CatalogMobileFiltersPanelWrapper>
+  );
+}
+
+const CatalogMobileFiltersPanelWrapper = styled.div`
+  width: 100%;
+  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  overflow-y: auto;
+  background: var(--sidebar-bg-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;