@redocly/theme 0.60.0-next.0 → 0.60.0-next.2

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const catalogDarkMode = css`
-  --catalog-avatar-bg-color: #3b3c45;
+  --catalog-avatar-bg-color: var(--color-warm-grey-4);
 `;

package/src/components/Catalog/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const catalog = css`
   /* === Catalog === */
   /**
@@ -284,7 +285,7 @@ export const catalog = css`
   --catalog-page-badge-line-height: var(--line-height-base);
 
   --catalog-page-badge-dot-size: 6px;
-  --catalog-page-badge-dot-border-color: #ffffff;
+  --catalog-page-badge-dot-border-color: var(--color-static-white);
 
   /**
     * @tokens Catalog table
@@ -405,8 +406,8 @@ export const catalog = css`
   --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
-  --catalog-entity-relations-node-root-text-color: #ffffff;
-  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  --catalog-entity-relations-node-root-text-color: var(--color-static-white);
+  --catalog-entity-relations-node-root-icon-color: var(--color-static-white);
   // @tokens End
 
   /**
@@ -427,3 +428,4 @@ export const catalog = css`
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -13,6 +13,7 @@ export type CatalogClassicInfoBlockProps = {
     scorecardLevel?: string;
     scoreCardSlug?: string;
     scorecardLevelIdx?: number;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     scorecardLevels?: Record<string, any>;
 
     [key: string]: unknown;

package/src/components/CatalogClassic/variables.ts

@@ -100,7 +100,7 @@ export const catalogClassic = css`
   --catalog-classic-page-badge-line-height: var(--line-height-base);
 
   --catalog-classic-page-badge-dot-size: 6px;
-  --catalog-classic-page-badge-dot-border-color: #ffffff;
+  --catalog-classic-page-badge-dot-border-color: var(--color-static-white);
 
   // @tokens End
 `;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -46,8 +46,11 @@ export type CodeBlockItems = {
 type ExternalSource = {
   sample: UnstableExternalCodeSample;
   exampleName?: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   pathParams?: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   properties?: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   operation?: any;
 };
 
@@ -128,6 +131,7 @@ export function CodeBlock({
                 }
               : undefined
           }
+          /* eslint-disable-next-line no-warning-comments */
           suppressHydrationWarning // TODO: investigate issue
           data-testid={dataTestId}
           hideCodeColors={hideCodeColors}

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -39,6 +39,7 @@ type ControlProps = {
   label?: string;
   tooltipText?: string;
   onClick?: () => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   props?: Record<string, any>;
 };
 

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -8,7 +8,7 @@ import { useCodeBlockTabsControls } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
-import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils/get-file-icon';
+import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils';
 
 export type CodeBlockTabsProps = {
   tabs: CodeBlockItems;

package/src/components/DatePicker/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const datePicker = css`
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
@@ -18,4 +19,5 @@ export const datePicker = css`
   --date-picker-wrapper-border-color: var(--border-color-primary);
   --date-picker-wrapper-radius: var(--border-radius-md);
   --date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
-`
+`;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Feedback/Mood.tsx

@@ -269,10 +269,10 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button type="submit" variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Feedback/Rating.tsx

@@ -182,10 +182,10 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button onClick={onSubmitRatingForm} variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Filter/FilterDateRange.tsx

@@ -25,7 +25,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
       <FilterOptions>
         <DateRangeWrapper>
           <DateRangeRow>
-            <span>From:</span>
+            <span>{translate('filter.dateRange.from', 'From:')}</span>
             <DatePicker
               closeCalendar={true}
               format="y-MM-dd"
@@ -45,7 +45,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
             />
           </DateRangeRow>
           <DateRangeRow>
-            <span>To:</span>
+            <span>{translate('filter.dateRange.to', 'To:')}</span>
             <DatePicker
               closeCalendar={true}
               dayPlaceholder="DD"

package/src/components/Filter/FilterSelect.tsx

@@ -55,6 +55,7 @@ export function FilterSelect({
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <StyledSelect
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
         onChange={(value) => filter.selectOption(value)}
         options={selectOptions}

package/src/components/JsonViewer/{helpers.tsx → Helpers.tsx}

@@ -7,6 +7,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export function JsonValue(props: {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
@@ -103,6 +104,7 @@ export function JsonValue(props: {
 
 function JsonKeyValue(props: {
   name: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   defaultExpandLevel: number;

package/src/components/JsonViewer/JsonViewer.tsx

@@ -6,13 +6,14 @@ import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
-import { JsonValue } from './helpers';
+import { JsonValue } from './Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
   controls?: CodeBlockControlsProps['controls'];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   data: any;
   className?: string;
   expandLevel: number;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -63,6 +63,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
+      {/* eslint-disable-next-line no-warning-comments */}
       {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </LastUpdatedWrapper>

package/src/components/Loaders/Loading.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 const LoadingMessage = styled.div<{ color: string }>`
   font-family: helvetica, sans, sans-serif;
@@ -20,9 +21,12 @@ export type LoadingProps = {
 };
 
 export function Loading({ color }: LoadingProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div style={{ textAlign: 'center' }}>
-      <LoadingMessage color={color}>Loading ...</LoadingMessage>
+      <LoadingMessage color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
       <Spinner color={color} />
     </div>
   );

package/src/components/Markdown/Markdown.tsx

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 import type { PropsWithChildren } from 'react';
 
 import { typography } from '@redocly/theme/core/utils';
-import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
+import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
-import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
+import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
 
 export type MarkdownProps = PropsWithChildren<{
   className?: string;

package/src/components/OpenApiDocs/hooks/AfterOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiTitle.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiTitle(_props: AfterOpenApiTitleProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiTitle: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const BeforeOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiFooter.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiFooter() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiFooter: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiHeader.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiHeader() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiHeader: any = null;

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -27,6 +27,7 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
@@ -101,7 +102,9 @@ export function SearchFilterFieldSelect({
       searchable={true}
       footer={
         selectOptions.length === MAX_SELECT_OPTIONS ? (
-          <FilterSelectFooter>Search to show more items...</FilterSelectFooter>
+          <FilterSelectFooter>
+            {translate('search.filter.field.footer', 'Search to show more items...')}
+          </FilterSelectFooter>
         ) : null
       }
       onSearch={onSearch}

package/src/components/Search/SearchAiMessage.tsx

@@ -95,9 +95,9 @@ function SearchAiMessageComponent({
         />
       )}
       <MessageContentWrapper>
-        <MessageWrapper role={role}>
-          {role === AiSearchConversationRole.ASSISTANT ? (
-            <>
+        {role === AiSearchConversationRole.ASSISTANT ? (
+          <>
+            <MessageWrapper role={role}>
               <ResponseText as="div" children={markDownContent} data-testid="response-text" />
               {hasResources && (
                 <>
@@ -119,42 +119,47 @@ function SearchAiMessageComponent({
                       ))}
                     </ResourceTagsWrapper>
                   </ResourcesWrapper>
-                  <FeedbackWrapper>
-                    <SearchAiActionButtons
-                      content={content}
-                      feedback={feedback}
-                      onFeedback={handleFeedbackClick}
-                      disabled={feedbackSent}
-                    />
-                  </FeedbackWrapper>
                 </>
               )}
-            </>
-          ) : (
-            content
-          )}
-          {isThinking && content.length === 0 && (
-            <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
-              <ThinkingDot />
-              <ThinkingDot />
-              <ThinkingDot />
-            </ThinkingDotsWrapper>
-          )}
-        </MessageWrapper>
-        {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
-          <SearchAiNegativeFeedbackForm
-            messageId={messageId}
-            onClose={onFeedbackChange}
-            onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
-          />
-        )}
-        {showSuccessMessage && (
-          <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
-            <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
-            <SuccessMessageText>
-              {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
-            </SuccessMessageText>
-          </SuccessMessageWrapper>
+              {isThinking && content.length === 0 && (
+                <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
+                  <ThinkingDot />
+                  <ThinkingDot />
+                  <ThinkingDot />
+                </ThinkingDotsWrapper>
+              )}
+              {content.length > 0 && (
+                <FeedbackWrapper>
+                  <SearchAiActionButtons
+                    content={content}
+                    feedback={feedback}
+                    onFeedback={handleFeedbackClick}
+                    disabled={!!feedback}
+                  />
+                </FeedbackWrapper>
+              )}
+            </MessageWrapper>
+            {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
+              <SearchAiNegativeFeedbackForm
+                messageId={messageId}
+                onClose={(messageId: string, feedback: FeedbackType) => {
+                  onFeedbackChange(messageId, feedback);
+                  setFeedbackSent(true);
+                }}
+                onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
+              />
+            )}
+            {showSuccessMessage && (
+              <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
+                <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
+                <SuccessMessageText>
+                  {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
+                </SuccessMessageText>
+              </SuccessMessageWrapper>
+            )}
+          </>
+        ) : (
+          <MessageWrapper role={role}>{content}</MessageWrapper>
         )}
       </MessageContentWrapper>
     </SearchAiMessageWrapper>

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

@@ -11,6 +11,7 @@ import { searchHighlight } from '@redocly/theme/components/Search/SearchHighligh
 import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { trimText } 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) {
@@ -84,7 +87,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]);