@redocly/theme 0.60.0-next.1 → 0.60.0-next.3

package/src/components/Search/SearchAiNegativeFeedbackForm.tsx

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { FeedbackType } from '@redocly/theme/core/types';
 
+import { FeedbackType } from '@redocly/theme/core/types';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
@@ -12,8 +12,9 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type SearchAiNegativeFeedbackFormProps = {
   messageId: string;
-  onClose: (messageId: string, feedback: FeedbackType | undefined) => void;
+  onClose: (messageId: string, feedback: FeedbackType, reason?: string) => void;
   onSubmit: (reason: string) => void;
+  formRef?: React.Ref<HTMLDivElement>;
 };
 
 const NEGATIVE_FEEDBACK_DEFAULT_REASONS = [
@@ -27,6 +28,7 @@ export function SearchAiNegativeFeedbackForm({
   messageId,
   onClose,
   onSubmit,
+  formRef,
 }: SearchAiNegativeFeedbackFormProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -54,7 +56,7 @@ export function SearchAiNegativeFeedbackForm({
   }, [showMoreInput]);
 
   return (
-    <FeedbackFormWrapper data-component-name="Search/SearchAiNegativeFeedbackForm">
+    <FeedbackFormWrapper data-component-name="Search/SearchAiNegativeFeedbackForm" ref={formRef}>
       <FeedbackHeader>
         {showMoreInput ? (
           <BackButton
@@ -72,7 +74,7 @@ export function SearchAiNegativeFeedbackForm({
           variant="text"
           size="small"
           icon={<CloseIcon />}
-          onClick={() => onClose(messageId, undefined)}
+          onClick={() => onClose(messageId, FeedbackType.Dislike, undefined)}
           aria-label="Close feedback form"
         />
       </FeedbackHeader>
@@ -85,7 +87,7 @@ export function SearchAiNegativeFeedbackForm({
             </Button>
           ))}
           <Button variant="outlined" size="small" onClick={() => setShowMoreInput(true)}>
-            More...
+            {translate('search.ai.feedback.more', 'More...')}
           </Button>
         </FeedbackReasonsWrapper>
       ) : (

package/src/components/Search/SearchGroups.tsx

@@ -9,6 +9,7 @@ import {
   type SearchFilterItem,
 } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type SearchGroupsProps = {
   facets: SearchFacet[];
@@ -26,6 +27,8 @@ export function SearchGroups({
   onQuickFilterReset,
 }: SearchGroupsProps): JSX.Element {
   const groupFacets = facets.filter((facet) => facet.field === groupField);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   const handleGroupTagClick = (
     value: string,
@@ -47,7 +50,7 @@ export function SearchGroups({
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
         selectable
       >
-        All
+        {translate('search.groups.all', 'All')}
       </GroupTag>
       <Divider />
       {groupFacets.flatMap((facet) =>

package/src/components/Search/SearchHighlight.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function slicer(str: string, arr: string[]): any[] {
   const markOpenIndex = str.indexOf('<mark>');
   const markCloseIndex = str.indexOf('</mark>');

package/src/components/Search/SearchItem.tsx

@@ -9,8 +9,9 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
-import { trimText } from '@redocly/theme/core/utils';
+import { trimText, getOperationColor } from '@redocly/theme/core/utils';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
@@ -32,6 +33,8 @@ export function SearchItem({
   innerRef,
 }: SearchItemProps): JSX.Element {
   const ref = useRef<HTMLAnchorElement>(null);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   useEffect(() => {
     if (item.active) {
@@ -45,6 +48,11 @@ export function SearchItem({
     highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
   const shouldShowPath = document.path && document.path?.length > 1;
 
+  const httpColor = getOperationColor({
+    isAdditionalOperation: document.isAdditionalOperation,
+    httpVerb: document.httpMethod || '',
+  });
+
   return (
     <SearchItemWrapper
       className={className}
@@ -74,7 +82,7 @@ export function SearchItem({
           )}
           {document.httpMethod ? (
             <SearchItemOperation>
-              <SearchItemOperationTag color={document.httpMethod}>
+              <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
               {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
@@ -84,7 +92,11 @@ export function SearchItem({
             <SearchItemTitle>
               {highlight.title ? searchHighlight(highlight.title) : document.title}
             </SearchItemTitle>
-            {document.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+            {document.deprecated ? (
+              <SearchItemBadge deprecated>
+                {translate('search.searchItem.deprecated', 'Deprecated')}
+              </SearchItemBadge>
+            ) : null}
             {document.badges
               ? document.badges.map(({ name, color }) => (
                   <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>

package/src/components/Search/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const search = css`
   /**
     * @tokens Search
@@ -261,3 +262,4 @@ export const search = css`
 
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Segmented/Segmented.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SegmentedProps } from '@redocly/theme/core/types/segmented';
+import type { SegmentedProps } from '@redocly/theme/core/types';
 
-import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
+import { typedMemo } from '@redocly/theme/core/hoc/typed-memo';
 
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,

package/src/components/Select/Select.tsx

@@ -2,14 +2,14 @@ import React, { Fragment, useEffect, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { SelectOption, SelectProps } from '@redocly/theme/core/types/select';
+import type { SelectOption, SelectProps } from '@redocly/theme/core/types';
 
 import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 import { SelectInput } from '@redocly/theme/components/Select/SelectInput';
 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 { useOutsideClick } from '@redocly/theme/core/hooks';
+import { useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 
 export function Select<T>(props: SelectProps<T>): JSX.Element {
   const {
@@ -37,6 +37,8 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     renderInput,
     renderDivider,
   } = props;
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   const getSelectedOptionsFromPropsValue = () => {
     const values = Array.isArray(value) ? value : [value];
@@ -231,7 +233,9 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       >
         <SelectDropdownMenu role="listbox" footer={footer}>
           {filteredOptions.length === 0 ? (
-            <DropdownMenuItem disabled>No results</DropdownMenuItem>
+            <DropdownMenuItem disabled>
+              {translate('select.noResults', 'No results')}
+            </DropdownMenuItem>
           ) : (
             filteredOptions.map((option, index) => {
               return (
@@ -258,7 +262,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
                   {renderDivider && index !== options.length - 1 ? renderDivider() : null}
                 </Fragment>
               );
-            }) || 'No results'
+            }) || translate('select.noResults', 'No results')
           )}
         </SelectDropdownMenu>
       </SelectDropdown>

package/src/components/Select/SelectInput.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import React, { useRef } from 'react';
 
-import type { SelectOption } from '@redocly/theme/core/types/select';
+import type { SelectOption } from '@redocly/theme/core/types';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
@@ -11,7 +11,9 @@ type SelectInputProps<T> = {
   id?: string;
   listboxId?: string;
   selectedOptions: SelectOption<T>[];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   searchValue: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   stickyValue: any;
   onlyIcon?: boolean;
   icon?: React.ReactNode;
@@ -21,10 +23,15 @@ type SelectInputProps<T> = {
   searchable?: boolean;
   clearable?: boolean;
   inputRef?: React.ForwardedRef<HTMLInputElement>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   clearHandler?: (value?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   inputBlurHandler?: (e?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   inputFocusHandler?: (e?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   searchHandler?: (e?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   clickHandler?: (e?: any) => void;
 };
 
@@ -50,11 +57,13 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const onChangeHandler = (e: any) => {
     searchHandler?.(e);
     inputRef.current?.focus();
   };
 
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const onKeyDownHandler = (e: any) => {
     if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
       clearHandler?.(selectedOptions[selectedOptions.length - 1]);

package/src/components/SidebarActions/{styled.tsx → styled.ts}

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
-export const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }>`
+const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }>`
   display: flex;
   position: relative;
   flex-direction: ${({ collapsedSidebar }) => (collapsedSidebar ? 'column' : 'row')};
@@ -16,7 +16,7 @@ export const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }
   padding: calc(var(--spacing-unit) / 2);
 `;
 
-export const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
+const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius);
@@ -26,7 +26,7 @@ export const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
   background-color: ${({ active }) => active && 'var(--segmented-buttons-bg-color-inner)'};
 `;
 
-export const ControlsWrap = styled.span<{
+const ControlsWrap = styled.span<{
   iconCount?: number;
   isCollapsed?: boolean;
 }>`
@@ -59,10 +59,17 @@ export const ControlsWrap = styled.span<{
   }
 `;
 
-export const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boolean }>`
+const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boolean }>`
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
   gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;
+
+export {
+  StyledChangeViewButton,
+  StyledChangeViewButtonWrap,
+  ControlsWrapChangeLayoutButtons,
+  ControlsWrap,
+};

package/src/components/Tag/Tag.tsx

@@ -12,7 +12,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
-type HttpStatusColor = 'http-deprecated';
+type HttpStatusColor = 'http-deprecated' | 'http-additional-operation';
 type StatusColor =
   | DefaultStatusColor
   | ActionStatusColor
@@ -120,6 +120,7 @@ export function Tag({
         return React.cloneElement(element, {
           ...props,
           children: truncateText(props.children, maxLen),
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         } as any);
       }
     }

package/src/components/Tag/variables.dark.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const tagDarkMode = css`
   --tag-close-button-bg-color-focus: var(--color-warm-grey-6); // @presenter Color
 
@@ -229,6 +230,12 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: #373776; // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #FCAB69; // @presenter Color
+    --tag-bg-color: #523926; // @presenter Color
+    --tag-bg-color-hover: #694830; // @presenter Color
+  }
+
   .tag-receive {
     --tag-color: #88CF82; // @presenter Color
     --tag-bg-color: #23421F; // @presenter Color
@@ -276,3 +283,4 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: transparent;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Tag/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const tag = css`
   /**
     * @tokens Tag borders
@@ -310,6 +311,12 @@ export const tag = css`
     --tag-color: var(--text-color-disabled); // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #F97316; // @presenter Color
+    --tag-bg-color: #faede3; // @presenter Color
+    --tag-bg-color-hover: #fae2cf; // @presenter Color
+  }
+
   .tag-send {
     --tag-color: #4144F6; // @presenter Color
     --tag-bg-color: #ECECFE; // @presenter Color
@@ -393,3 +400,4 @@ export const tag = css`
       
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Tooltip/Tooltip.tsx

@@ -259,7 +259,7 @@ const TooltipWrapper = styled.div`
   position: relative;
   display: flex;
 `;
-
+/* eslint-disable theme/no-raw-colors-in-styles */
 const TooltipBody = styled.span<
   Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & { width?: string }
 >`
@@ -302,3 +302,4 @@ const TooltipBody = styled.span<
     ${PLACEMENTS[placement]};
   `}
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/VersionPicker/VersionPicker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import type { Version } from '@redocly/config';
-import type { SelectProps } from '@redocly/theme/core/types/select';
+import type { SelectProps } from '@redocly/theme/core/types';
 
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { Select } from '@redocly/theme/components/Select/Select';
@@ -58,6 +58,7 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
           'aria-label': translate('versionPicker.label', 'Select version'),
         }}
       />
+      {/* eslint-disable-next-line theme/require-translate */}
       <SrOnly id="version-picker-description">
         This is version picker select, using it you can select a version of the API.
       </SrOnly>

package/src/core/constants/index.ts

@@ -4,4 +4,5 @@ export * from './code-walkthrough';
 export * from './search';
 export * from './catalog';
 export * from './breadcrumb';
+export * from './request-methods';
 export * from './mcp';

package/src/core/constants/request-methods.ts

@@ -0,0 +1,10 @@
+export const REQUEST_METHODS = [
+  'GET',
+  'POST',
+  'PUT',
+  'DELETE',
+  'PATCH',
+  'OPTIONS',
+  'HEAD',
+  'TRACE',
+];

package/src/core/hoc/index.ts

@@ -1 +1 @@
-export * from './typedMemo';
+export * from './typed-memo';

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

@@ -2,10 +2,10 @@ import { vi } from 'vitest';
 
 export const useThemeHooks = vi.fn(() => ({
   useTranslate: vi.fn(() => ({
-    translate: vi.fn((key: string, defaultValue: string) =>
+    translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue
         ? typeof defaultValue !== 'string'
-          ? (defaultValue as any).defaultValue
+          ? (defaultValue as { defaultValue: string }).defaultValue
           : defaultValue
         : key,
     ),

package/src/core/hooks/__tests__/mocks/mock-intersection-observer.ts

@@ -3,8 +3,8 @@ export class MockIntersectionObserver {
   public readonly rootMargin: string;
   public readonly thresholds: ReadonlyArray<number>;
 
-  private viewPort: any;
-  private entries: any[];
+  private viewPort: Element | Document | Window;
+  private entries: Array<Partial<IntersectionObserverEntry> & { target: HTMLElement }>;
   private readonly callback: IntersectionObserverCallback;
 
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
@@ -19,10 +19,11 @@ export class MockIntersectionObserver {
   }
 
   private intersect = () => {
-    this.entries.map((entry) => {
-      entry.isIntersecting = this.isInViewPort(entry.target);
-    });
-    this.callback(this.entries, this);
+    this.entries = this.entries.map((entry) => ({
+      ...entry,
+      isIntersecting: this.isInViewPort(entry.target),
+    }));
+    this.callback(this.entries as IntersectionObserverEntry[], this);
   };
 
   isInViewPort(target: HTMLElement): boolean {
@@ -42,7 +43,7 @@ export class MockIntersectionObserver {
     this.entries = [];
   }
 
-  takeRecords(): any[] {
-    return this.entries;
+  takeRecords(): IntersectionObserverEntry[] {
+    return this.entries as IntersectionObserverEntry[];
   }
 }

package/src/core/hooks/catalog/{useCatalogEntitySchema.ts → use-catalog-entity-schema.ts}

@@ -16,17 +16,17 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
     parsedSchema = undefined;
   }
 
-  let parsedApiDefinition: any | undefined;
+  let parsedApiDefinition: Record<string, unknown> | undefined;
 
   try {
     parsedApiDefinition = relatedEntity?.metadata?.schema
-      ? JSON.parse(relatedEntity.metadata.schema)
+      ? (JSON.parse(relatedEntity.metadata.schema) as Record<string, unknown>)
       : undefined;
   } catch (err) {
     parsedApiDefinition = undefined;
   }
 
-  const definition: any =
+  const definition: Record<string, unknown> =
     !parsedApiDefinition || relatedEntity?.metadata?.specType !== 'openapi'
       ? {
           openapi: '3.0.0',

package/src/core/hooks/catalog/{useGraph.ts → use-graph.ts}

@@ -42,7 +42,7 @@ type EntityGraphData = {
   key: string;
 };
 
-// TODO: This isn't final implementation, leaved comments for future reference.
+// Note: This isn't final implementation, leaved comments for future reference.
 export function useGraph({ entity, relations }: UseGraphProps): UseGraphReturn {
   const rootNodeId = entity.id;
 

package/src/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.ts

@@ -18,7 +18,7 @@ export class MockIntersectionObserver {
     this.disconnect = vi.fn();
   }
 
-  takeRecords(): any[] {
+  takeRecords(): IntersectionObserverEntry[] {
     return [];
   }
 }

package/src/core/hooks/code-walkthrough/__mocks__/mock-intersection-observer.ts

@@ -0,0 +1,24 @@
+import { vi } from 'vitest';
+
+export class MockIntersectionObserver {
+  public readonly root: Element | Document | null;
+  public readonly rootMargin: string;
+  public readonly thresholds: ReadonlyArray<number>;
+  observe: (target: HTMLElement) => void;
+  unobserve: (target: HTMLElement) => void;
+  disconnect: () => void;
+
+  // @ts-ignore
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.root = null;
+    this.rootMargin = '0px';
+    this.thresholds = [1];
+    this.observe = vi.fn();
+    this.unobserve = vi.fn();
+    this.disconnect = vi.fn();
+  }
+
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+}

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -211,6 +211,7 @@ export function useCodeWalkthroughControls(
         continue;
       }
 
+      // eslint-disable-next-line no-warning-comments
       // code-walk-todo: need to check if we have a default fallback
       const items = Array.isArray(filter?.items) ? filter.items : [];
 

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -299,7 +299,7 @@ type StepsGroup = {
   freeSpace: number;
   usedSpace: number;
   offset: number;
-  steps: { offset: number; height: number }[];
+  steps: { offset: number; height: number; ref?: HTMLElement }[];
 };
 /**
  * This function analyzes the offset and height of each step to determine
@@ -358,7 +358,7 @@ function getGroups(steps: CodeWalkthroughStep[]): StepsGroup[] {
       offset: stepOffset - currentGroup.offset,
       height: stepHeight,
       ref: step.compRef,
-    } as any);
+    });
     currentGroup.usedSpace += stepHeight + margin;
   }
 

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import type { CodeWalkthroughFile } from '@redocly/config';
 
 import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
-import { getFileIconByExt } from '../../utils/get-file-icon';
+import { getFileIconByExt } from '../../utils/GetFileIcon';
 import { removeLeadingSlash } from '../../utils/urls';
 
 export type RenderableFile = CodeWalkthroughFile & {

package/src/core/hooks/index.ts

@@ -37,11 +37,14 @@ export * from './code-walkthrough/use-renderable-files';
 export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
-export * from './catalog/useCatalogEntities';
-export * from './catalog/useGraph';
+export * from './catalog/use-catalog-entities';
+export * from './catalog/use-graph';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';
 export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
+export * from './catalog/use-catalog-table-view-row';
+export * from './catalog/use-catalog-entity-schema';
+export * from './catalog/use-catalog-table-header-cell-actions';

package/src/core/hooks/menu/use-collapse.ts

@@ -199,13 +199,13 @@ function setStyles<T extends Partial<CSSStyleDeclaration>>(
     }
   }
 }
-
-export function useEvent<T extends (...args: any[]) => any>(callback?: T) {
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export function useEvent<T extends (...args: any[]) => any>(callback?: T): T {
   const ref = useRef<T | undefined>(callback);
 
   useEffect(() => {
     ref.current = callback;
   });
 
-  return useCallback(((...args: any) => ref.current?.(...args)) as T, []);
+  return useCallback(((...args: Parameters<T>) => ref.current?.(...args)) as T, []);
 }

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -42,6 +42,7 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
 
   if (menuType === MobileMenuType.PAGE) {
     if (activeVersion) {
+      // eslint-disable-next-line no-warning-comments
       // TODO: consider to refactor
       const versionsSection = buildVersionSection(translate, versions, activeVersion);
       menuItems.push(...versionsSection);