@redocly/theme 0.58.0-next.0 → 0.58.0-next.10

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
-import { CatalogViewMode } from '@redocly/theme/core/types/catalog';
+import { CatalogViewMode } from '@redocly/theme/core/types';
 
 function useViewMode(initialViewMode: CatalogViewMode) {
   const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);

package/src/components/Catalog/variables.ts

@@ -13,7 +13,7 @@ export const catalog = css`
   --catalog-filter-padding-vertical-mobile: 0;
   --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
 
-  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-heading-margin: 0 0 var(--spacing-sm) 0;
   --catalog-sidebar-width: 285px;
 
   /**
@@ -130,10 +130,14 @@ export const catalog = css`
   --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
   --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
+  --catalog-entity-icon-color-custom: var(--color-persian-green-8);
+  --catalog-entity-border-color-custom: var(--color-persian-green-5);
+  --catalog-entity-bg-color-custom: var(--color-persian-green-1);
+
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
@@ -193,7 +197,7 @@ export const catalog = css`
     */
   --catalog-card-height: 241px;
   --catalog-card-min-width: 400px;
-  --catalog-card-padding-vertical: var(--spacing-md);
+  --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -223,12 +227,11 @@ export const catalog = css`
   /**
     * @tokens Catalog metadata
     */
-  --catalog-metadata-section-margin-top: var(--spacing-md);
-  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-section-margin-top: var(--spacing-base);
+  --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
   --catalog-metadata-label-color: var(--text-color-secondary);
-  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -263,7 +266,7 @@ export const catalog = css`
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
   --catalog-card-description-height: 62px;
-  --catalog-card-description-margin-top: 2px;
+  --catalog-card-description-margin-top: 8px;
 
   --catalog-card-content-gap: var(--spacing-xs);
   --catalog-card-content-gap-vertical: var(--spacing-sm);

package/src/components/CatalogClassic/CatalogClassic.tsx

@@ -8,6 +8,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
 import { H2 } from '@redocly/theme/components/Typography/H2';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/CatalogClassic/CatalogClassicHighlight';
 import { CatalogClassicActions } from '@redocly/theme/components/CatalogClassic/CatalogClassicActions';
@@ -37,16 +38,18 @@ export default function CatalogClassic(props: CatalogClassicProps): JSX.Element
         data-component-name="CatalogClassic/CatalogClassic"
         withoutFilters={!filters.length}
       >
-        <FiltersSidebar
-          menu={
-            <FilterContent
-              setFilterTerm={setFilterTerm}
-              filters={filters}
-              filterTerm={filterTerm}
-              filterValuesCasing={catalogConfig.filterValuesCasing}
-            />
-          }
-        />
+        {Boolean(filters.length) && (
+          <FiltersSidebar
+            menu={
+              <FilterContent
+                setFilterTerm={setFilterTerm}
+                filters={filters}
+                filterTerm={filterTerm}
+                filterValuesCasing={catalogConfig.filterValuesCasing}
+              />
+            }
+          />
+        )}
         {filterPopoverVisible && (
           <FilterPopover
             onClose={() => setFilterPopoverVisible(false)}
@@ -75,6 +78,14 @@ export default function CatalogClassic(props: CatalogClassicProps): JSX.Element
                 {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
               </CatalogDescription>
             ) : null}
+            {!filters.length && (
+              <CatalogSearchWrapper>
+                <FilterInput
+                  value={filterTerm}
+                  onChange={(updatedTerm) => setFilterTerm(updatedTerm)}
+                />
+              </CatalogSearchWrapper>
+            )}
           </CatalogPageDescriptionWrapper>
 
           <CatalogClassicVirtualizedGroups
@@ -163,3 +174,8 @@ const FiltersSidebar = styled(Sidebar)`
   }
   --menu-container-padding-top: 0;
 `;
+
+const CatalogSearchWrapper = styled.div`
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -18,8 +18,8 @@ export type CodeBlockProps = {
   header?: CodeBlockControlsProps;
   dataTestId?: string;
   className?: string;
-  tabs?: CodeBlockTabItems;
-  dropdown?: CodeBlockDropdownItems;
+  tabs?: CodeBlockItems;
+  dropdown?: CodeBlockItems;
   withLineNumbers?: boolean;
   startLineNumber?: number;
   highlightedHtml?: string;
@@ -37,15 +37,9 @@ type UnstableExternalCodeSample = {
   get: (source: ExternalSource) => string;
 };
 
-export type CodeBlockTabItems = {
-  items: { name: string; lang?: string }[];
-  onChange: (name: string) => void;
-  value: string;
-};
-
-export type CodeBlockDropdownItems = {
-  items: { name: string; lang?: string }[];
-  onChange: (name: string | string[]) => void;
+export type CodeBlockItems = {
+  items: { name: string; lang?: string; id: string }[];
+  onChange: (id: string) => void;
   value: string;
 };
 

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type {
-  CodeBlockDropdownItems,
-  CodeBlockTabItems,
-} from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
@@ -24,8 +21,8 @@ export type CodeBlockControlsProps = {
   className?: string;
   title?: React.ReactNode | string;
   controls?: ControlItems | false;
-  tabs?: CodeBlockTabItems;
-  dropdown?: CodeBlockDropdownItems;
+  tabs?: CodeBlockItems;
+  dropdown?: CodeBlockItems;
 };
 
 type ControlItems = {

package/src/components/CodeBlock/CodeBlockDropdown.tsx

@@ -1,24 +1,23 @@
 import React, { type JSX } from 'react';
-import styled from 'styled-components';
 
-import type { CodeBlockDropdownItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { ChevronSortIcon } from '@redocly/theme/icons/ChevronSortIcon/ChevronSortIcon';
 import { NoneIcon } from '@redocly/theme/icons/NoneIcon/NoneIcon';
 import { getFileIconByLanguage } from '@redocly/theme/core/utils';
 
-export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element {
-  const activeItem = items.find((item) => item.name === value) || items[0];
+export function CodeBlockDropdown({ items, onChange, value }: CodeBlockItems): JSX.Element {
+  const activeItem = items.find((item) => item.id === value) || items[0];
   const icon = activeItem?.lang ? getFileIconByLanguage(activeItem?.lang) : null;
   return (
-    <StyledDropdown
+    <Dropdown
+      withArrow
       alignment="end"
       trigger={
-        <Button icon={<ChevronSortIcon />} iconPosition="right" variant="text" size="small">
+        <Button iconPosition="right" variant="ghost" size="small">
           {icon}
           {activeItem.name}
         </Button>
@@ -27,11 +26,12 @@ export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownI
       <DropdownMenu>
         {items.map((item) => {
           const icon = getFileIconByLanguage(item.lang || '');
+          const isActive = item.id === value;
           return (
             <DropdownMenuItem
-              key={item.lang}
-              onAction={() => onChange(item.name)}
-              active={item.name === activeItem.name}
+              key={item.id}
+              onAction={() => onChange(item.id)}
+              active={isActive}
               prefix={item.lang ? icon : <NoneIcon size="var(--icon-size)" />}
             >
               {item.name}
@@ -39,15 +39,6 @@ export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownI
           );
         })}
       </DropdownMenu>
-    </StyledDropdown>
+    </Dropdown>
   );
 }
-
-const StyledDropdown = styled(Dropdown)`
-  margin-left: auto;
-  --icon-size: 18px;
-  --button-color: var(--text-color-secondary);
-  button.button-size-small {
-    --button-icon-size: 18px;
-  }
-`;

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeBlockTabItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { useCodeBlockTabsControls } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -11,7 +11,7 @@ import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronR
 import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils/get-file-icon';
 
 export type CodeBlockTabsProps = {
-  tabs: CodeBlockTabItems;
+  tabs: CodeBlockItems;
 };
 
 export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
@@ -24,7 +24,7 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
   });
 
   useEffect(() => {
-    const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === tabs.value);
+    const activeTab = tabRefs.current.find((tab) => tab?.dataset.id === tabs.value);
 
     if (activeTab) {
       activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
@@ -35,23 +35,23 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
     <CodeBlockTabsWrapper ref={containerRef} data-component-name="CodeBlock/CodeBlockTabs">
       <ShadowWrapper>
         <Tabs>
-          {tabs.items.map(({ name, lang }, i) => {
+          {tabs.items.map((item, i) => {
+            const { name, lang, id } = item;
             const ext = name.match(/\.([^.]+)$/)?.[1];
             const fileIcon = lang
               ? getFileIconByLanguage(lang)
               : ext
                 ? getFileIconByExt(ext)
                 : null;
-
             return (
               <Tab
                 ref={(el: HTMLButtonElement | null) => {
                   tabRefs.current[i] = el as HTMLButtonElement;
                 }}
                 data-name={name}
-                active={name === tabs.value}
-                key={name + i}
-                onClick={() => tabs.onChange(name)}
+                active={id === tabs.value}
+                key={id}
+                onClick={() => tabs.onChange(id)}
               >
                 {fileIcon}
                 {name}

package/src/components/Filter/FilterContent.tsx

@@ -15,7 +15,9 @@ export type FilterContentProps = {
   setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
   filterTerm: string;
-  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  filterValuesCasing?:
+    | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
+    | ((str: string) => string);
   hideSearch?: boolean;
   showCounter?: boolean;
 };

package/src/components/Search/SearchDialog.tsx

@@ -306,13 +306,16 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     aria-selected="true"
                   >
                     <AiStarsIcon
+                      style={{ flexShrink: 0 }}
                       color="var(--search-ai-icon-color)"
                       size="36px"
                       background="var(--search-ai-icon-bg-color)"
                       margin="0 var(--spacing-md) 0 0"
                       borderRadius="var(--border-radius-lg)"
                     />
-                    <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
+                    <QueryWrapper>
+                      <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
+                    </QueryWrapper>
                     <Typography>- {translate('search.ai.label', 'Ask AI assistant')}</Typography>
                     <ReturnKeyIcon color="var(--search-item-text-color)" />
                   </SearchWithAI>
@@ -484,10 +487,10 @@ const SearchDialogWrapper = styled.div`
   border-radius: 0;
 
   @media screen and (max-width: ${breakpoints.small}) {
-    min-height: -webkit-fill-available !important;
-    min-height: 100dvh !important;
-    height: auto !important;
-    width: 100vw !important;
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
   }
 
   @media screen and (min-width: ${breakpoints.small}) {
@@ -539,6 +542,8 @@ const SearchDialogBodyMainView = styled.div`
 
 const SearchDialogBodyFilterView = styled.div`
   overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
 `;
 
 const SearchDialogFooter = styled.footer`
@@ -673,3 +678,7 @@ const SearchWithAI = styled.div`
     margin-right: var(--spacing-xs);
   }
 `;
+
+const QueryWrapper = styled.div`
+  word-break: break-word;
+`;

package/src/components/Search/SearchFilter.tsx

@@ -66,7 +66,8 @@ export function SearchFilter({
 }
 
 const SearchFilterWrapper = styled.div`
-  width: var(--search-filter-width);
+  width: 100%;
+  max-width: var(--search-filter-width);
   display: flex;
   flex-direction: column;
   padding: var(--search-filter-padding);

package/src/components/Tooltip/Tooltip.tsx

@@ -98,14 +98,12 @@ export function TooltipComponent({
   }, [isOpened, placement, updateTooltipPosition]);
 
   useEffect(() => {
-    if (isControlled && !disabled) {
-      if (isOpen) {
-        handleOpen();
-      } else {
-        handleClose();
-      }
+    if (isOpen && !disabled) {
+      handleOpen();
+    } else {
+      handleClose();
     }
-  }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
+  }, [isOpen, handleOpen, handleClose, disabled]);
 
   const controllers = !isControlled &&
     !disabled && {
@@ -268,7 +266,7 @@ const TooltipBody = styled.span<
   display: inline-block;
 
   padding: var(--tooltip-padding);
-  max-width: var(--tooltip-max-width);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -26,7 +26,7 @@ export function TooltipWrapper({
   showOnHover = true,
   disabled = false,
 }: TooltipWrapperProps): JSX.Element {
-  const tooltip = useControl();
+  const tooltip = useControl(false);
 
   const handleMouseEnter = (): void => {
     if (showOnHover && !disabled) {

package/src/core/constants/catalog.ts

@@ -2,33 +2,15 @@ import type { EntityRelationType } from '../types/catalog';
 
 export const CATALOG_TAG_MAX_LENGTH = 15;
 
-export const ENTITY_RELATION_TYPES = [
-  'partOf',
-  'hasParts',
-  'creates',
-  'createdBy',
-  'owns',
-  'ownedBy',
-  'implements',
-  'implementedBy',
-  'dependsOn',
-  'dependencyOf',
-  'uses',
-  'usedBy',
-  'produces',
-  'consumes',
-  'linksTo',
-  'supersedes',
-  'supersededBy',
-  'compatibleWith',
-  'extends',
-  'extendedBy',
-  'relatesTo',
-  'hasMember',
-  'memberOf',
-  'triggers',
-  'triggeredBy',
-] as const;
+export const PREDEFINED_ENTITY_TYPES = [
+  'service',
+  'domain',
+  'team',
+  'user',
+  'api-description',
+  'data-schema',
+  'api-operation',
+];
 
 export const reverseRelationMap: Record<EntityRelationType, EntityRelationType> = {
   partOf: 'hasParts',
@@ -56,8 +38,40 @@ export const reverseRelationMap: Record<EntityRelationType, EntityRelationType>
   memberOf: 'hasMember',
   triggers: 'triggeredBy',
   triggeredBy: 'triggers',
+  returns: 'returnedBy',
+  returnedBy: 'returns',
 } as const;
 
+export const relationTypeMap: Record<EntityRelationType, string> = {
+  partOf: 'Part of',
+  hasParts: 'Has parts',
+  creates: 'Creates',
+  createdBy: 'Created by',
+  owns: 'Owns',
+  ownedBy: 'Owned by',
+  implements: 'Implements',
+  implementedBy: 'Implemented by',
+  dependsOn: 'Depends on',
+  dependencyOf: 'Dependency of',
+  uses: 'Uses',
+  usedBy: 'Used by',
+  produces: 'Produces',
+  consumes: 'Consumes',
+  linksTo: 'Links to',
+  supersedes: 'Supersedes',
+  supersededBy: 'Superseded by',
+  compatibleWith: 'Compatible with',
+  extends: 'Extends',
+  extendedBy: 'Extended by',
+  relatesTo: 'Relates to',
+  hasMember: 'Has member',
+  memberOf: 'Member of',
+  triggers: 'Triggers',
+  triggeredBy: 'Triggered by',
+  returns: 'Returns',
+  returnedBy: 'Returned by',
+};
+
 export enum GraphHandleType {
   Target = 'target',
   Source = 'source',

package/src/core/contexts/CodeSnippetContext.tsx

@@ -1,31 +1,67 @@
-import { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
 
-export type CodeSnippetContextType = {
-  activeSnippetName: string;
-  setActiveSnippetName: (name: string) => void;
-};
+import { useLocalState } from '../hooks/use-local-state';
 
 export const CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
 
+type CodeSnippetContextType = {
+  activeSnippets: Record<string, string>;
+  setActiveSnippet: (groupId: string, snippetId: string) => void;
+};
+
 export const CodeSnippetContext = createContext<CodeSnippetContextType | null>(null);
 
-export function useActiveCodeSnippetName(
-  mode: 'tabs' | 'dropdown',
-): [string, (name: string) => void] {
+export function CodeSnippetProvider({ children }: { children: React.ReactNode }) {
+  const [activeSnippets, setActiveSnippets] = useLocalState<Record<string, string>>(
+    CODE_GROUP_SNIPPET_NAME_KEY,
+    {},
+  );
+
+  const setActiveSnippet = useCallback(
+    (groupId: string, snippetId: string) => {
+      setActiveSnippets({ ...activeSnippets, [groupId]: snippetId });
+    },
+    [activeSnippets, setActiveSnippets],
+  );
+
+  const contextValue = { activeSnippets, setActiveSnippet };
+
+  return <CodeSnippetContext.Provider value={contextValue}>{children}</CodeSnippetContext.Provider>;
+}
+
+export const useCodeSnippetContext = (): CodeSnippetContextType => {
   const context = useContext(CodeSnippetContext);
+
   if (!context) {
     throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
   }
 
-  const [activeSnippetName, setActiveSnippetName] = useState(
-    mode === 'tabs' ? '' : context.activeSnippetName,
+  return context;
+};
+
+export const useActiveCodeSnippetId = (
+  groupId?: string,
+  availableSnippets?: { id: string }[],
+): [string, (id: string) => void] => {
+  const { activeSnippets, setActiveSnippet } = useCodeSnippetContext();
+
+  const storedSnippetId = groupId ? activeSnippets[groupId] || '' : '';
+
+  const activeId = useMemo(() => {
+    if (!availableSnippets?.length) return storedSnippetId;
+
+    const found = storedSnippetId && availableSnippets.find((s) => s.id === storedSnippetId);
+    return found ? storedSnippetId : availableSnippets[0]?.id || '';
+  }, [storedSnippetId, availableSnippets]);
+
+  const setActiveSnippetId = useCallback(
+    (id: string) => {
+      if (groupId) {
+        setActiveSnippet(groupId, id);
+      }
+    },
+    [groupId, setActiveSnippet],
   );
 
-  if (mode === 'tabs') {
-    // use non-synced state for tabs mode
-    return [activeSnippetName, setActiveSnippetName];
-  } else {
-    // use global synced state for dropdown mode
-    return [context.activeSnippetName, context.setActiveSnippetName];
-  }
-}
+  return [activeId, setActiveSnippetId];
+};

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

@@ -0,0 +1,46 @@
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+
+type CatalogEntitySchemaProps = {
+  entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+};
+
+export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntitySchemaProps) {
+  const { schema } = entity.metadata || {};
+
+  let parsedSchema;
+
+  try {
+    parsedSchema = JSON.parse(schema);
+  } catch (error) {
+    parsedSchema = undefined;
+  }
+
+  let parsedApiDefinition: any | undefined;
+
+  try {
+    parsedApiDefinition = relatedEntity?.metadata?.schema
+      ? JSON.parse(relatedEntity.metadata.schema)
+      : undefined;
+  } catch (err) {
+    parsedApiDefinition = undefined;
+  }
+
+  const definition: any =
+    !parsedApiDefinition || relatedEntity?.metadata?.specType !== 'openapi'
+      ? {
+          openapi: '3.0.0',
+          info: { version: '1', description: 'test', title: 'test' },
+          paths: {},
+          components: {
+            schemas: {},
+          },
+        }
+      : parsedApiDefinition;
+
+  return {
+    definition,
+    parsedSchema,
+    rawSchema: schema,
+  };
+}

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

@@ -21,7 +21,7 @@ export function useCatalogTableViewRow({
     }
 
     return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
-      return catalog.includes?.some((include) => include.type === entityType);
+      return catalog?.includes?.some((include) => include.type === entityType);
     });
   };
 

package/src/core/hooks/use-active-section-id.ts

@@ -25,6 +25,12 @@ export function useActiveSectionId(
           setItemId('');
           return;
         }
+
+        if (window.scrollY <= 0) {
+          setItemId(sections[0].getAttribute('data-section-id') || '');
+          return;
+        }
+
         for (let i = 0; i < sections.length; i++) {
           const section = sections[i];
           const rect = section.getBoundingClientRect();

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
 
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 
 type CodeBlockTabsProps = {
-  tabs: CodeBlockTabItems;
+  tabs: CodeBlockItems;
   containerRef: React.RefObject<HTMLDivElement | null>;
   tabRefs: React.RefObject<HTMLButtonElement[]>;
 };