@redocly/theme 0.55.0-rc.2 → 0.55.0

package/src/components/Tooltip/Tooltip.tsx

@@ -13,6 +13,7 @@ export type TooltipProps = {
   className?: string;
   width?: string;
   dataTestId?: string;
+  disabled?: boolean;
 };
 
 export function TooltipComponent({
@@ -24,6 +25,7 @@ export function TooltipComponent({
   className = 'default',
   width,
   dataTestId,
+  disabled = false,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
   const ref = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
@@ -33,20 +35,21 @@ export function TooltipComponent({
   const isControlled = isOpen !== undefined;
 
   useEffect(() => {
-    if (isControlled) {
+    if (isControlled && !disabled) {
       if (isOpen) {
         handleOpen();
       } else {
         handleClose();
       }
     }
-  }, [isOpen, isControlled, handleOpen, handleClose]);
+  }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
 
-  const controllers = !isControlled && {
-    onMouseEnter: handleOpen,
-    onMouseLeave: handleClose,
-    onClick: handleClose,
-  };
+  const controllers = !isControlled &&
+    !disabled && {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onClick: handleClose,
+    };
 
   return (
     <TooltipWrapper
@@ -56,7 +59,7 @@ export function TooltipComponent({
       data-component-name="Tooltip/Tooltip"
     >
       {children}
-      {isOpened && (
+      {isOpened && !disabled && (
         <TooltipBody
           data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
           placement={placement}
@@ -83,10 +86,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-top-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top-width: 8px;
           border-top-style: solid;
+          border-radius: 2px 2px 0 0;
           bottom: 0;
           left: 50%;
           transform: translate(-50%, 99%);
@@ -103,10 +107,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-bottom-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-bottom-width: 8px;
           border-bottom-style: solid;
+          border-radius: 0 0 2px 2px;
           top: 0;
           left: 50%;
           transform: translate(-50%, -99%);
@@ -123,10 +128,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-left-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-left-width: 8px;
           border-left-style: solid;
+          border-radius: 2px 0 0 2px;
           top: 50%;
           right: 0;
           transform: translate(99%, -50%);
@@ -143,10 +149,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-right-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-right-width: 8px;
           border-right-style: solid;
+          border-radius: 0 2px 2px 0;
           top: 50%;
           left: 0;
           transform: translate(-99%, -50%);
@@ -173,7 +180,7 @@ const TooltipBody = styled.span<
   white-space: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;
@@ -187,11 +194,13 @@ const TooltipBody = styled.span<
     display: inline-block;
     width: 0;
     height: 0;
-    border-color: var(--tooltip-bg-color);
+    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
+  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+    var(--tooltip-border-color, transparent);
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};

package/src/components/Tooltip/variables.ts

@@ -8,6 +8,10 @@ export const tooltip = css`
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-arrow-color: var(--tooltip-bg-color);
+  --tooltip-border-width: 0;
+  --tooltip-border-style: solid;
+  --tooltip-border-color: transparent;
   --tooltip-padding-vertical: var(--spacing-xs);
   --tooltip-padding-horizontal: var(--spacing-sm);
   --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
@@ -16,6 +20,19 @@ export const tooltip = css`
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);
     --tooltip-bg-color: var(--bg-color-raised);
+    --tooltip-arrow-color: var(--tooltip-bg-color);
+  }
+
+  .tooltip-catalog {
+    --tooltip-text-color: var(--text-color-primary);
+    --tooltip-bg-color: var(--layer-color);
+    --tooltip-arrow-color: var(--border-color-secondary);
+    --tooltip-border-width: 2px;
+    --tooltip-border-color: var(--border-color-secondary);
+    --tooltip-padding-vertical: var(--spacing-xs);
+    --tooltip-padding-horizontal: var(--spacing-sm);
+    --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+    --tooltip-max-width: 300px;
   }
 
   // @tokens End

package/src/components/VersionPicker/VersionPicker.tsx

@@ -35,8 +35,15 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   if (!options.length && !versionPicker?.showForUnversioned) return null;
 
   return (
-    <VersionsPickerWrapper data-component-name="VersionPicker/VersionPicker">
-      <VersionPickerLabel data-translation-key="versionPicker.label">
+    <VersionsPickerWrapper
+      data-component-name="VersionPicker/VersionPicker"
+      role="region"
+      aria-label={translate('versionPicker.label', 'Version selector')}
+    >
+      <VersionPickerLabel
+        data-translation-key="versionPicker.label"
+        htmlFor="version-picker-select"
+      >
         {translate('versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
@@ -45,7 +52,15 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
         options={options}
         value={value}
         onChange={handleOnChange}
+        dataAttributes={{
+          id: 'version-picker-select',
+          'aria-describedby': 'version-picker-description',
+          'aria-label': translate('versionPicker.label', 'Select version'),
+        }}
       />
+      <SrOnly id="version-picker-description">
+        This is version picker select, using it you can select a version of the API.
+      </SrOnly>
     </VersionsPickerWrapper>
   );
 }
@@ -72,6 +87,10 @@ export const VersionPickerSelect = styled(Select)<SelectProps>`
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
+
+    &:focus-within {
+      outline: 1px solid var(--version-picker-focus-outline-color);
+    }
   }
 `;
 
@@ -83,4 +102,15 @@ const VersionsPickerWrapper = styled.div`
   justify-content: space-between;
   padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
   border-bottom: var(--version-picker-border-bottom);
+
+  &:focus-visible {
+    outline: 1px solid var(--version-picker-focus-outline-color);
+  }
+`;
+
+const SrOnly = styled.span`
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 `;

package/src/components/VersionPicker/variables.ts

@@ -35,5 +35,6 @@ export const versionPicker = css`
   --version-picker-list-item-bg-color-active: var(--select-list-item-bg-color-active); // @presenter Color
   --version-picker-list-item-bg-color-hover: var(--select-list-item-bg-color-hover); // @presenter Color
 
+  --version-picker-focus-outline-color: var(--button-border-color-focused);
   // @tokens End
 `;

package/src/core/constants/catalog.ts

@@ -0,0 +1 @@
+export const CATALOG_TAG_MAX_LENGTH = 15;

package/src/core/constants/common.ts

@@ -1,5 +1,6 @@
 export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
 export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
+export const CONTENT_ID = 'content';
 
 export enum FEEDBACK_TYPES {
   RATING = 'rating',

package/src/core/constants/index.ts

@@ -2,3 +2,4 @@ export * from '@redocly/theme/core/constants/common';
 export * from '@redocly/theme/core/constants/environments';
 export * from '@redocly/theme/core/constants/code-walkthrough';
 export * from '@redocly/theme/core/constants/search';
+export * from '@redocly/theme/core/constants/catalog';

package/src/core/constants/search.ts

@@ -38,4 +38,6 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
   [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 } as const;
 
+export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
+
 export const SEARCH_DEBOUNCE_TIME_MS = 300;

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -85,4 +85,5 @@ export const useThemeHooks = jest.fn(() => ({
     submitFeedback: jest.fn(),
   })),
   useLoadAndNavigate: jest.fn(),
+  usePageProps: jest.fn().mockReturnValue({}),
 }));

package/src/core/hooks/catalog/useCatalogEntities.ts

@@ -0,0 +1,16 @@
+import type { UseCatalogEntitiesProps } from '@redocly/theme';
+
+export function useCatalogEntities({ entitiesTypes, excludedEntities }: UseCatalogEntitiesProps) {
+  const initialTypesWithoutAll = entitiesTypes.filter((type) => type !== 'all');
+  const initialTypesFilter = entitiesTypes.length ? `type:${initialTypesWithoutAll.join(',')}` : '';
+  const initialExcludedEntitiesFilter = excludedEntities?.length
+    ? `-key:${excludedEntities.map((entity) => entity.key).join(',')}`
+    : '';
+  const initialFilter = initialTypesFilter
+    ? `${initialTypesFilter} AND ${initialExcludedEntitiesFilter}`
+    : initialExcludedEntitiesFilter;
+
+  return {
+    initialFilter,
+  };
+}

package/src/core/hooks/catalog/useCatalogTableHeaderCellActions.ts

@@ -0,0 +1,38 @@
+import {
+  BaseEntity,
+  CatalogColumn,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+
+import { SortOption } from '../../types';
+
+type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
+  column: CatalogColumn<T>;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  setSortOption: (sortOption: SortOption | null) => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
+  column,
+  handleSortClick,
+  setSortOption,
+  isColumnSorted,
+}: CatalogTableHeaderCellActionsProps<T>) {
+  const sortKey = column.sortKey;
+  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
+  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+
+  const handleCellClick = (): void => {
+    if (!column.sortable || !sortKey) return;
+
+    if (isDownActive) {
+      handleSortClick(sortKey, 'desc');
+    } else if (isUpActive) {
+      setSortOption(null);
+    } else {
+      handleSortClick(sortKey, 'asc');
+    }
+  };
+
+  return { handleCellClick, sortKey, isUpActive, isDownActive };
+}

package/src/core/hooks/catalog/useCatalogTableViewRow.ts

@@ -0,0 +1,40 @@
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { getPathPrefix } from '../../utils';
+
+type CatalogTableViewRowProps = {
+  entityKey: string;
+  entityType: string;
+  catalogConfig: CatalogEntityConfig;
+  entitiesCatalogConfig?: EntitiesCatalogConfig;
+};
+
+export function useCatalogTableViewRow({
+  entityKey,
+  entityType,
+  catalogConfig,
+  entitiesCatalogConfig,
+}: CatalogTableViewRowProps) {
+  const getCatalogSpecificConfigByEntityTypeIncluded = () => {
+    if (!entitiesCatalogConfig) {
+      return;
+    }
+
+    return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
+      return catalog.includes?.some((include) => include.type === entityType);
+    });
+  };
+
+  const getEntityDetailsLink = () => {
+    const pathPrefix = getPathPrefix();
+    const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded();
+
+    if (!catalogSpecificConfig || !entitiesCatalogConfig) {
+      return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entityKey}`;
+    }
+
+    return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entityKey}`;
+  };
+
+  return { getEntityDetailsLink };
+}

package/src/core/hooks/index.ts

@@ -36,5 +36,7 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
 export * from '@redocly/theme/core/hooks/use-time-ago';
 export * from '@redocly/theme/core/hooks/use-input-key-commands';
+export * from '@redocly/theme/core/hooks/catalog/useCatalogEntities';
 export * from '@redocly/theme/core/hooks/use-active-page-version';
 export * from '@redocly/theme/core/hooks/use-page-versions';
+export * from '@redocly/theme/core/hooks/use-user-teams';

package/src/core/hooks/use-user-teams.ts

@@ -0,0 +1,8 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function useUserTeams() {
+  const { useUserTeams } = useThemeHooks();
+  const userTeams = useUserTeams();
+
+  return userTeams;
+}

package/src/core/styles/dark.ts

@@ -10,6 +10,7 @@ import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
 import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
+import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
 
 
 const replayDarkMode = css`
@@ -316,6 +317,7 @@ export const darkMode = css`
   ${replayDarkMode}
   ${switcherDarkMode}
   ${cardsDarkMode}
+  ${catalogDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -8,6 +8,7 @@ import { sidebar } from '@redocly/theme/components/Sidebar/variables';
 import { breadcrumbs } from '@redocly/theme/components/Breadcrumbs/variables';
 import { tag } from '@redocly/theme/components/Tag/variables';
 import { toc } from '@redocly/theme/components/TableOfContent/variables';
+import { catalog } from '@redocly/theme/components/Catalog/variables';
 import { filter } from '@redocly/theme/components/Filter/variables';
 import { catalogClassic } from '@redocly/theme/components/CatalogClassic/variables';
 import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
@@ -37,6 +38,7 @@ import { datePicker } from '@redocly/theme/components/DatePicker/variables'
 import { switcher } from '@redocly/theme/components/Switch/variables';
 import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
 import { codeWalkthrough } from '@redocly/theme/markdoc/components/CodeWalkthrough/variables';
+import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 
 const themeColors = css`
   /* === Palette === */
@@ -367,6 +369,7 @@ const typography = css`
   --font-size-base: 14px; // Base font size of the entire system.
   --font-size-sm: 12px;
   --font-size-lg: 16px;
+  --font-size-md: 18px;
   --font-size-xl: 20px;
 
   /**
@@ -1211,6 +1214,7 @@ export const styles = css`
     ${breadcrumbs}
     ${button}
     ${cards}
+    ${catalog}
     ${catalogClassic}
     ${code}
     ${codeWalkthrough}
@@ -1262,6 +1266,7 @@ export const styles = css`
     ${scorecard}
     ${datePicker}
     ${replay}
+    ${skipContent}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/src/core/types/catalog.ts

@@ -1,5 +1,41 @@
+import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
+export type SortOption = 'title' | '-title' | 'type' | '-type';
+
+export type UseCatalogResponse = {
+  filters: ResolvedFilter[];
+  filterQuery: string;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  viewMode: CatalogViewMode;
+  setViewMode: (mode: CatalogViewMode) => void;
+  entitiesCounter: number;
+  setEntitiesCounter: (counter: number) => void;
+  onChangeViewClick: () => void;
+  onChangeCollapseSidebarClick: () => void;
+  layout: LayoutVariant;
+  collapsedSidebar: boolean;
+};
+
+export type UseCatalogSortResponse = {
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export type UseCatalogSearchResponse = {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+};
+
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
   filters: ResolvedFilter[];
@@ -12,10 +48,6 @@ export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
     value: string;
     count: number;
   }[];
-  filteredOptions: {
-    value: string;
-    count: number;
-  }[];
   toggleOption: (option: string) => void;
   selectOption: (option: string) => void;
   parentUsed: boolean;
@@ -34,9 +66,115 @@ export type CatalogItem = {
   scorecardLevelIdx?: number;
   scorecardLevels?: Record<string, { uniqueErrors: number; uniqueWarnings: number }>;
   scoreCardSlug?: string;
-  tags?: unknown[];
+  tags?: string[];
   versions?: CatalogItem[];
   version?: string;
   versionFolderId?: string;
   [k: string]: unknown;
 };
+
+export type DefaultCatalogSlug =
+  | 'services'
+  | 'users'
+  | 'teams'
+  | 'domains'
+  | 'api-descriptions'
+  | 'all';
+
+export type CatalogApiResults<T, L> = {
+  query: UseInfiniteQueryResult<InfiniteData<L, unknown>, Error>;
+  items: T[];
+  total: number;
+};
+
+export type CatalogApiParams = {
+  limit?: number;
+  filter?: string;
+  sort?: string;
+  search?: string;
+};
+
+export type UseCatalogEntitiesProps = {
+  entitiesTypes: string[];
+  excludedEntities?: CatalogEntityConfig['excludes'];
+};
+
+export type UseCatalogEntitiesResponse = {
+  setEntitiesCounter: (counter: number) => void;
+};
+
+export type EntityType = 'service' | 'domain' | 'team' | 'user' | 'api-description';
+
+export type CatalogViewMode = 'cards' | 'table';
+
+export type CatalogSwitcherItem = {
+  labelTranslationKey: string;
+  slug: string;
+  selected: boolean;
+};
+
+// TODO: remove this types after we make api-sdk package public and will be able import them from there
+export type BffCatalogRelatedEntity = {
+  readonly id: string;
+  type: string;
+  key: string;
+  title: string;
+  summary?: string | null;
+  readonly source: 'api' | 'file';
+  sourceFile?: string | null;
+  metadata?: Record<string, any>;
+  readonly createdAt: string | null;
+  readonly updatedAt: string | null;
+};
+
+export type BffCatalogEntity = {
+  readonly id: string;
+  readonly organizationId: string;
+  readonly projectId: string;
+  key: string;
+  type: string;
+  title: string;
+  readonly source: 'api' | 'file';
+  domains?: Array<BffCatalogRelatedEntity>;
+  owners?: Array<BffCatalogRelatedEntity>;
+  summary?: string;
+  tags?: Array<string>;
+  metadata?: Record<string, any>;
+  git?: Array<string>;
+  contact?: {
+    slack?: {
+      channels?: Array<{
+        name: string;
+      }>;
+    };
+  };
+  links?: Array<{
+    label: string;
+    url: string;
+  }>;
+  sourceFile?: string;
+  readonly object: 'catalogEntityView';
+  readonly createdAt: string;
+  readonly updatedAt: string;
+};
+
+export type BffCatalogEntityList = {
+  object: 'list';
+  page: Page;
+  items: Array<BffCatalogEntity>;
+};
+
+export type BffCatalogRelatedEntityList = {
+  object: 'list';
+  page: Page;
+  items: Array<BffCatalogRelatedEntity>;
+};
+
+export type Page = {
+  endCursor: string | null;
+  startCursor: string | null;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+  limit: number;
+  total: number;
+};

package/src/core/types/filter.ts

@@ -4,6 +4,7 @@ import type { RedoclyConfig } from '@redocly/config';
 export type FilterProps = {
   filter: ResolvedFilter & { selectedOptions: any };
   filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  showCounter?: boolean;
 };
 
 export type FilterTypes = NonNullable<FilterProps['filter']['type']>;

package/src/core/types/hooks.ts

@@ -1,13 +1,16 @@
-import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
-
-import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type {
+  CatalogEntityConfig,
+  PageProps,
+  ResolvedNavItemWithLink,
+  Version,
+} from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
 import type {
   UserMenuData,
-  FilteredCatalog,
+  UseCatalogResponse,
   ItemState,
   SearchItemData,
   SubmitFeedbackParams,
@@ -18,8 +21,21 @@ import type {
   SearchFilterItem,
   SearchFacetQuery,
   AiSearchConversationItem,
+  CatalogApiResults,
+  CatalogApiParams,
+  FilteredCatalog,
+  UseCatalogSortResponse,
+  UseCatalogSearchResponse,
+  EventType,
+  SendEventParams,
 } from '@redocly/theme/core/types';
 
+import {
+  BffCatalogEntity,
+  BffCatalogEntityList,
+  BffCatalogRelatedEntity,
+  BffCatalogRelatedEntityList,
+} from '@redocly/theme/core/types';
 import { AiSearchError } from '@redocly/theme/core/constants';
 
 export type ThemeHooks = {
@@ -118,9 +134,20 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
       }
     | undefined;
+  useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+  useCatalogSort: () => UseCatalogSortResponse;
+  useCatalogSearch: () => UseCatalogSearchResponse;
+  useFetchCatalogEntities: (
+    params: CatalogApiParams,
+    initialData?: BffCatalogEntityList,
+  ) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;
+  useFetchCatalogEntitiesRelations: (
+    params: CatalogApiParams & { entityKey: string },
+    initialData?: BffCatalogRelatedEntityList,
+  ) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
   useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => {
-    send(data: AsyncApiRealm.Messages): void;
+    send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
   };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;