@redocly/theme 0.58.0-next.1 → 0.58.0-next.11

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
@@ -30,14 +31,24 @@ const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) =>
-    defaultColor
-      ? 'var(--catalog-entity-bg-color)'
-      : `var(--catalog-entity-bg-color-${entityType})`};
+  background-color: ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+      return 'var(--catalog-entity-bg-color)';
+    }
+    if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+      return `var(--catalog-entity-bg-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-bg-color-custom)';
+  }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) =>
-      defaultColor
-        ? 'var(--catalog-entity-border-color)'
-        : `var(--catalog-entity-border-color-${entityType})`};
+    ${({ defaultColor, entityType }) => {
+      if (defaultColor) {
+        return 'var(--catalog-entity-border-color)';
+      }
+      if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-border-color-${entityType})`;
+      }
+      return 'var(--catalog-entity-border-color-custom)';
+    }};
 `;

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { EntityType } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeTagProps = {
   entityType: string;
@@ -43,7 +44,14 @@ export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps):
 const EntityTypeTagWrapper = styled(Tag)<{ entityType: EntityType }>`
   font-size: var(--font-size-base);
   background-color: transparent;
-  text-transform: lowercase;
-  border: 1px solid ${({ entityType }) => `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+  text-transform: none;
+  border: 1px solid
+    ${({ entityType }) =>
+      !PREDEFINED_ENTITY_TYPES.includes(entityType)
+        ? 'var(--catalog-entity-border-color-custom)'
+        : `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) =>
+    !PREDEFINED_ENTITY_TYPES.includes(entityType)
+      ? 'var(--catalog-entity-icon-color-custom)'
+      : `var(--catalog-entity-icon-color-${entityType})`};
 `;

package/src/components/Catalog/CatalogSelector.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types/catalog';
+import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -13,7 +13,7 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <CatalogEntityTypeIcon entityType={entity.type} defaultColor={true} />
+      <CatalogEntityTypeIcon entityType={entity.type} />
       <EntityTitleContent>
         <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>

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

@@ -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 = {
@@ -87,7 +84,7 @@ export function CodeBlockControls({
       {tabs && <CodeBlockTabs tabs={tabs} />}
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
-        {report && !report?.props?.hide ? (
+        {report && !report.hidden && !report?.props?.hide ? (
           <TooltipWrapper
             tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
             placement="top"

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/JsonViewer/JsonViewer.tsx

@@ -12,11 +12,11 @@ export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-
 
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
+  controls?: CodeBlockControlsProps['controls'];
   data: any;
   className?: string;
   expandLevel: number;
   startLineNumber?: number;
-  hideHeader?: boolean;
   onCopyClick?: () => void;
   onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };
@@ -28,7 +28,7 @@ function JsonComponent({
   onCopyClick,
   onPanelToggle,
   title,
-  hideHeader,
+  controls = {},
 }: JsonProps): JSX.Element {
   const showFoldingButtons =
     data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
@@ -53,6 +53,8 @@ function JsonComponent({
 
   const source = JSON.stringify(data, null, 2);
 
+  const hasHeader = title || controls;
+
   return (
     <JsonViewerWrap
       data-testid="json-viewer"
@@ -61,17 +63,22 @@ function JsonComponent({
     >
       <CodeBlock
         header={
-          hideHeader
-            ? undefined
-            : {
+          hasHeader
+            ? {
                 title,
                 className: 'code-block-header',
-                controls: {
-                  copy: { data, onClick: onCopyClick, handleOutside: true },
-                  expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-                  collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+                controls: controls && {
+                  ...controls,
+                  copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
+                  expand: showFoldingButtons
+                    ? { ...controls.expand, onClick: expandAll }
+                    : undefined,
+                  collapse: showFoldingButtons
+                    ? { ...controls.collapse, onClick: collapseAll }
+                    : undefined,
                 },
               }
+            : undefined
         }
         source={source}
       >

package/src/components/PageActions/PageActions.tsx

@@ -13,20 +13,22 @@ import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { usePageActions } from '@redocly/theme/core/hooks';
+import { PageActionType, usePageActions } from '@redocly/theme/core/hooks';
 
 type ActionState = 'idle' | 'processing' | 'done';
 
 type PageActionProps = {
-  pageSlug: string;
+  pageSlug?: string;
+  mcpUrl?: string;
+  actions?: PageActionType[];
 };
 
 const ACTION_DONE_DISPLAY_DURATION = 1000;
 
 export function PageActions(props: PageActionProps): JSX.Element | null {
-  const { pageSlug } = props;
+  const { pageSlug, mcpUrl } = props;
 
-  const actions = usePageActions(pageSlug || '/');
+  const actions = usePageActions(pageSlug || '/', mcpUrl, props.actions);
 
   const [actionState, setActionState] = useState<ActionState>('idle');
 

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,6 +38,8 @@ export const reverseRelationMap: Record<EntityRelationType, EntityRelationType>
   memberOf: 'hasMember',
   triggers: 'triggeredBy',
   triggeredBy: 'triggers',
+  returns: 'returnedBy',
+  returnedBy: 'returns',
 } as const;
 
 export const relationTypeMap: Record<EntityRelationType, string> = {
@@ -84,6 +68,8 @@ export const relationTypeMap: Record<EntityRelationType, string> = {
   memberOf: 'Member of',
   triggers: 'Triggers',
   triggeredBy: 'Triggered by',
+  returns: 'Returns',
+  returnedBy: 'Returned by',
 };
 
 export enum GraphHandleType {