@redocly/theme 0.66.0-next.2 → 0.66.0-next.4

package/src/components/Search/SearchRecent.tsx

@@ -102,7 +102,7 @@ const SearchRecentItem = styled.div`
     display: none;
   }
 
-  :hover {
+  &:hover {
     background-color: var(--search-recent-item-bg-color-hover);
     color: var(--search-recent-item-text-color-hover);
 
@@ -112,7 +112,7 @@ const SearchRecentItem = styled.div`
     }
   }
 
-  :focus-visible {
+  &:focus-visible {
     outline: 1px solid var(--search-recent-item-border-color-focused);
     background-color: var(--search-recent-item-bg-color-active);
   }

package/src/components/Search/variables.ts

@@ -90,7 +90,7 @@ export const search = css`
   --search-shortcuts-gap: var(--spacing-xs);
 
   --search-message-font-size: var(--font-size-lg); // @presenter FontSize
-  --search-message-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-message-font-weight: var(--font-weight-medium); // @presenter FontWeight
   --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);

package/src/components/Select/SelectInput.tsx

@@ -218,9 +218,9 @@ const SelectInputTag = styled(Tag)`
   --tag-content-padding: 0;
 `;
 
-const SelectInternalInput = styled.input.attrs(() => ({
+const SelectInternalInput = styled.input.attrs<{ width?: string }>({
   type: 'text',
-}))<{ width?: string }>`
+})`
   outline: none;
   border-radius: var(--select-input-border-radius);
   border: none;

package/src/components/StatusCode/StatusCode.tsx

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 
-export const StatusCode = styled.button.attrs({ 'data-component-name': 'StatusCode/StatusCode' })<{
+export const StatusCode = styled.button.attrs<{
   status: string;
-}>`
+  'data-component-name': string;
+}>({ 'data-component-name': 'StatusCode/StatusCode' })`
   background: none;
   padding: 0;
   display: flex;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -122,7 +122,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
 
   border-left: solid 2px transparent;
 
-  :hover {
+  &:hover {
     color: var(--toc-item-text-color-active);
   }
   &.active {
@@ -131,7 +131,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
     font-weight: var(--toc-item-font-weight-active);
   }
 
-  :empty {
+  &:empty {
     padding: 0;
   }
 `;

package/src/components/Tag/Tag.tsx

@@ -202,7 +202,12 @@ const CloseButton = styled.div`
   }
 `;
 
-const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagProps) => ({
+const TagWrapper = styled.div.attrs<
+  TagProps & {
+    hasCloseButton?: boolean;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  }
+>(({ className, color, size, variant }) => ({
   className: [
     className,
     'tag-default',
@@ -212,12 +217,7 @@ const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagPro
   ]
     .filter(Boolean)
     .join(' '),
-}))<
-  TagProps & {
-    hasCloseButton?: boolean;
-    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
-  }
->`
+}))`
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/components/Tags/CounterTag.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
-export const CounterTag = styled(Tag).attrs({
+export const CounterTag = styled(Tag).attrs<{ 'data-component-name': string }>({
   className: 'tag-counter',
   'data-component-name': 'Tags/CounterTag',
 })`

package/src/components/Tags/HttpTag.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
-export const HttpTag = styled(Tag).attrs({
+export const HttpTag = styled(Tag).attrs<{ 'data-component-name': string }>({
   className: 'tag-http',
   'data-component-name': 'Tags/HttpTag',
 })`

package/src/components/Typography/CompactTypography.tsx

@@ -2,8 +2,12 @@ import styled from 'styled-components';
 
 import { Typography } from '@redocly/theme/components/Typography/Typography';
 
-export const CompactTypography = styled(Typography).attrs(() => ({
+export const CompactTypography = styled(Typography).attrs<{
+  mt: string;
+  mb: string;
+  'data-component-name': string;
+}>({
   mt: '0em',
   mb: '0em',
   'data-component-name': 'Typography/CompactTypography',
-}))``;
+})``;

package/src/components/Typography/Typography.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export interface TypographyProps {
+export type TypographyProps = {
   color?: string;
   fontFamily?: string;
   fontSize?: string;
@@ -11,12 +11,13 @@ export interface TypographyProps {
   marginBottom?: string;
   marginTop?: string;
   textAlign?: string;
-}
+  'data-component-name'?: string;
+};
 
-export const Typography = styled.span.attrs<{ className?: string }>(({ className }) => ({
+export const Typography = styled.span.attrs<TypographyProps>(({ className }) => ({
   'data-component-name': 'Typography/Typography',
   className,
-}))<TypographyProps>`
+}))`
   color: ${({ color }) => color || 'var(--text-color-primary)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
   font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};

package/src/components/UserMenu/UserInfoMenuItem.tsx

@@ -36,7 +36,7 @@ export function UserInfoMenuItem({
   );
 }
 
-const UserInfoMenuItemWrapper = styled(DropdownMenuItem).attrs({
+const UserInfoMenuItemWrapper = styled(DropdownMenuItem).attrs<{ 'data-component-name': string }>({
   'data-component-name': 'UserMenu/UserInfoMenuItem',
 })`
   display: flex;

package/src/components/UserMenu/UserMenu.tsx

@@ -84,9 +84,9 @@ const UserMenuWrapper = styled.div`
   }
 `;
 
-const UserMenuTrigger = styled.div.attrs(() => ({
+const UserMenuTrigger = styled.div.attrs<{ 'data-testid': string }>({
   'data-testid': 'user-menu-button',
-}))`
+})`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -94,11 +94,11 @@ const UserMenuTrigger = styled.div.attrs(() => ({
   padding: 0;
 `;
 
-const StyledDropdown = styled(Dropdown).attrs(() => ({
+const StyledDropdown = styled(Dropdown).attrs<{ 'data-testid': string }>({
   dataAttributes: {
     'data-testid': 'user-menu-dropdown',
   },
-}))`
+})`
   --dropdown-menu-font-size: var(--user-menu-dropdown-font-size);
   --dropdown-menu-font-weight: var(--user-menu-dropdown-font-weight);
   --dropdown-menu-line-height: var(--user-menu-dropdown-line-height);

package/src/components/VersionPicker/VersionPicker.tsx

@@ -58,8 +58,8 @@ 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">
+        {/* eslint-disable-next-line theme/require-translate */}
         This is version picker select, using it you can select a version of the API.
       </SrOnly>
     </VersionsPickerWrapper>

package/src/core/constants/environments.ts

@@ -1,11 +1,13 @@
+/* oxlint-disable typescript/no-duplicate-enum-values -- JWTToken and Token intentionally share _token */
 export enum SecurityVariablesEnvSuffix {
   Username = '_username',
   Password = '_password',
   JWTToken = '_token',
   APIKey = '',
-  // eslint-disable-next-line  @typescript-eslint/no-duplicate-enum-values
+  // oxlint-disable-next-line typescript/no-duplicate-enum-values
   Token = '_token',
   ClientId = '_client_id',
   ClientSecret = '_client_secret',
   ClientAssertion = '_client_assertion',
 }
+/* oxlint-enable typescript/no-duplicate-enum-values */

package/src/core/styles/palette.dark.ts

@@ -1,6 +1,6 @@
-import { css, type FlattenSimpleInterpolation } from 'styled-components';
+import { css, type RuleSet } from 'styled-components';
 
-function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolation {
+function brandPaletteDark(palette: string | undefined): RuleSet<object> {
   switch (palette) {
     case 'slate':
       return css`

package/src/core/styles/palette.ts

@@ -1,6 +1,6 @@
-import { css, type FlattenSimpleInterpolation } from 'styled-components';
+import { css, type RuleSet } from 'styled-components';
 
-function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolation {
+function brandPaletteLight(palette: string | undefined): RuleSet<object> {
   switch (palette) {
     case 'slate':
       return css`

package/src/core/types/hooks.ts

@@ -98,6 +98,7 @@ export type ThemeHooks = {
     setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>;
     items: Record<string, SearchItemData[] | null>;
     isSearchLoading: boolean;
+    searchError: string | null;
     facets: SearchFacet[];
     groupField: string;
     setLoadMore: React.Dispatch<
@@ -111,6 +112,7 @@ export type ThemeHooks = {
     >;
     advancedSearch?: boolean;
     askAi?: boolean;
+    retrySearch: () => Promise<void>;
   };
   useAiSearch: (options?: { filter?: SearchFilterItem[]; product?: string }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;

package/src/core/types/l10n.ts

@@ -89,6 +89,8 @@ export type TranslationKey =
   | 'search.navbar.label'
   | 'search.suggested'
   | 'search.showMore'
+  | 'search.error.title'
+  | 'search.error.button'
   | 'search.filter.title'
   | 'search.filter.reset'
   | 'search.filter.field.reset'

package/src/core/utils/theme-helpers.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { RuleSet } from 'styled-components';
 
 enum Token {
   Comment = 'comment',
@@ -59,16 +59,13 @@ export function getTypographyCssRulesByComponentName(
   return result;
 }
 
-export function typography(
-  componentName: string,
-  fallbackName?: string,
-): FlattenSimpleInterpolation {
+export function typography(componentName: string, fallbackName?: string): RuleSet<object> {
   return css`
     ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
   `;
 }
 
-export function generateCodeBlockTokens(): FlattenSimpleInterpolation | string {
+export function generateCodeBlockTokens(): RuleSet<object> | string {
   let res = '';
 
   for (const token of Object.values(Token)) {

package/src/icons/AddIcon/AddIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const AddIcon = styled(Icon).attrs(() => ({
+export const AddIcon = styled(Icon).attrs({
   'data-component-name': 'icons/AddIcon/AddIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/AiStarsGradientIcon/AiStarsGradientIcon.tsx

@@ -59,9 +59,9 @@ const Icon = (props: AiStarsGradientIconProps) => {
   );
 };
 
-export const AiStarsGradientIcon = styled(Icon).attrs(() => ({
+export const AiStarsGradientIcon = styled(Icon).attrs({
   'data-component-name': 'icons/AiStarsGradientIcon/AiStarsGradientIcon',
-}))<AiStarsGradientIconProps>`
+})`
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 

package/src/icons/AiStarsIcon/AiStarsIcon.tsx

@@ -29,9 +29,9 @@ const Icon = (props: AiStarsIconProps) => {
   );
 };
 
-export const AiStarsIcon = styled(Icon).attrs(() => ({
+export const AiStarsIcon = styled(Icon).attrs({
   'data-component-name': 'icons/AiStarsIcon/AiStarsIcon',
-}))<AiStarsIconProps>`
+})`
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 

package/src/icons/AnthropicIcon/AnthropicIcon.tsx

@@ -16,9 +16,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const AnthropicIcon = styled(Icon).attrs(() => ({
+export const AnthropicIcon = styled(Icon).attrs({
   'data-component-name': 'icons/AnthropicIcon/AnthropicIcon',
-}))<IconProps>`
+})`
   color: ${({ color }) => getCssColorVariable(color)};
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};

package/src/icons/ArrowDownIcon/ArrowDownIcon.tsx

@@ -21,9 +21,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const ArrowDownIcon = styled(Icon).attrs(() => ({
+export const ArrowDownIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ArrowDownIcon/ArrowDownIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ArrowLeftIcon/ArrowLeftIcon.tsx

@@ -18,9 +18,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const ArrowLeftIcon = styled(Icon).attrs(() => ({
+export const ArrowLeftIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ArrowLeftIcon/ArrowLeftIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ArrowRightIcon/ArrowRightIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const ArrowRightIcon = styled(Icon).attrs(() => ({
+export const ArrowRightIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ArrowRightIcon/ArrowRightIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ArrowUpRightIcon/ArrowUpRightIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const ArrowUpRightIcon = styled(Icon).attrs(() => ({
+export const ArrowUpRightIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ArrowUpRightIcon/ArrowUpRightIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/AscSortIcon/AscSortIcon.tsx

@@ -17,9 +17,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const AscSortIcon = styled(Icon).attrs(() => ({
+export const AscSortIcon = styled(Icon).attrs({
   'data-component-name': 'icons/AscSortIcon/AscSortIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/BareMetalServerIcon/BareMetalServerIcon.tsx

@@ -16,9 +16,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const BareMetalServerIcon = styled(Icon).attrs(() => ({
+export const BareMetalServerIcon = styled(Icon).attrs({
   'data-component-name': 'icons/BareMetalServerIcon/BareMetalServerIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/BookmarkAddIcon/BookmarkAddIcon.tsx

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const BookmarkAddIcon = styled(Icon).attrs(() => ({
+export const BookmarkAddIcon = styled(Icon).attrs({
   'data-component-name': 'icons/BookmarkAddIcon/BookmarkAddIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/BotIcon/BotIcon.tsx

@@ -16,9 +16,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const BotIcon = styled(Icon).attrs(() => ({
+export const BotIcon = styled(Icon).attrs({
   'data-component-name': 'icons/BotIcon/BotIcon',
-}))<IconProps>`
+})`
   color: ${({ color }) => getCssColorVariable(color)};
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};

package/src/icons/CDNIcon/CDNIcon.tsx

@@ -39,9 +39,9 @@ const Icon = (props: CDNIconProps) => {
   );
 };
 
-export const CDNIcon = styled(Icon).attrs(() => ({
+export const CDNIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CDNIcon/CDNIcon',
-}))<CDNIconProps>`
+})`
   height: ${({ size }) => size || 'var(--icon-height, 1em)'};
   width: ${({ size }) => size || 'var(--icon-width, 1em)'};
 `;

package/src/icons/CardsIcon/CardsIcon.tsx

@@ -26,9 +26,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CardsIcon = styled(Icon).attrs(() => ({
+export const CardsIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CardsIcon/CardsIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CaretDownIcon/CaretDownIcon.tsx

@@ -14,9 +14,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CaretDownIcon = styled(Icon).attrs(() => ({
+export const CaretDownIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CaretDownIcon/CaretDownIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CaretUpIcon/CaretUpIcon.tsx

@@ -14,9 +14,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CaretUpIcon = styled(Icon).attrs(() => ({
+export const CaretUpIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CaretUpIcon/CaretUpIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CertificateIcon/CertificateIcon.tsx

@@ -21,9 +21,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CertificateIcon = styled(Icon).attrs(() => ({
+export const CertificateIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CertificateIcon/CertificateIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CharacterIcon/CharacterIcon.tsx

@@ -13,9 +13,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CharacterIcon = styled(Icon).attrs(() => ({
+export const CharacterIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CharacterIcon/CharacterIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ChatGptIcon/ChatGptIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const ChatGptIcon = styled(Icon).attrs(() => ({
+export const ChatGptIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ChatGptIcon/ChatGptIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ChatIcon/ChatIcon.tsx

@@ -23,9 +23,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const ChatIcon = styled(Icon).attrs(() => ({
+export const ChatIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ChatIcon/ChatIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CheckboxFilledIcon/CheckboxFilledIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CheckboxFilledIcon = styled(Icon).attrs(() => ({
+export const CheckboxFilledIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { IconProps } from '@redocly/theme/icons/types';
+
 const Icon = ({
   className,
   checked = false,
   onClick,
-}: {
-  className?: string;
+}: IconProps & {
   checked?: boolean;
   onClick?: () => void;
 }) => (
@@ -59,7 +60,7 @@ const Icon = ({
   </span>
 );
 
-export const CheckboxIcon = styled(Icon).attrs<{ checked?: boolean }>({
+export const CheckboxIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
 })`
   display: flex;

package/src/icons/CheckmarkFilledIcon/CheckmarkFilledIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CheckmarkFilledIcon = styled(Icon).attrs(() => ({
+export const CheckmarkFilledIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CheckmarkFilledIcon/CheckmarkFilledIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CheckmarkIcon/CheckmarkIcon.tsx

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CheckmarkIcon = styled(Icon).attrs(() => ({
+export const CheckmarkIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CheckmarkIcon/CheckmarkIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon.tsx

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
 
-export const CheckmarkOutlineIcon = styled(Icon).attrs(() => ({
+export const CheckmarkOutlineIcon = styled(Icon).attrs({
   'data-component-name': 'icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }