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

package/src/components/Tooltip/JsTooltip.tsx

@@ -125,15 +125,20 @@ function TooltipComponent({
 
 export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
+type TooltipArrowProps = {
+  $withArrow: boolean;
+  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
+};
+
 const PLACEMENTS = {
-  top: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+  top: css<TooltipArrowProps>`
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(0, -100%);
             margin-top: -10px;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(-100%, -100%);
               margin-top: -10px;
@@ -143,30 +148,28 @@ const PLACEMENTS = {
               margin-top: -10px;
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(99%);'}
         }
       `}
   `,
-  bottom: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+  bottom: css<TooltipArrowProps>`
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(0, 10px);
             margin-top: 0;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(-100%, 10px);
               margin-top: 0;
@@ -176,61 +179,55 @@ const PLACEMENTS = {
               margin-top: 0;
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-99%);'}
         }
       `}
   `,
-  left: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+  left: css<TooltipArrowProps>`
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           top: 50%;
           right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(99%);'}
         }
       `}
   `,
-  right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+  right: css<TooltipArrowProps>`
     transform: translate(0, -50%);
     margin-left: 10px;
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           top: 50%;
           left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(-99%);'}
         }
       `}
   `,
@@ -240,12 +237,12 @@ const TooltipWrapper = styled.div`
   position: relative;
   display: flex;
 `;
-const TooltipBody = styled.span<{
-  $placement: NonNullable<TooltipProps['placement']>;
-  $withArrow: boolean;
-  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
-  $width?: string;
-}>`
+const TooltipBody = styled.span<
+  TooltipArrowProps & {
+    $placement: NonNullable<TooltipProps['placement']>;
+    $width?: string;
+  }
+>`
   display: inline-block;
 
   padding: var(--tooltip-padding);
@@ -267,9 +264,7 @@ const TooltipBody = styled.span<{
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
@@ -279,7 +274,5 @@ const TooltipBody = styled.span<{
   box-shadow: var(--bg-raised-shadow);
 
   width: ${({ $width }) => $width || 'max-content'};
-  ${({ $placement }) => css`
-    ${PLACEMENTS[$placement]};
-  `}
+  ${({ $placement }) => PLACEMENTS[$placement]}
 `;

package/src/components/Tooltip/Tooltip.tsx

@@ -4,11 +4,10 @@ import type { TooltipProps } from '@redocly/theme/core/types';
 
 import { Tooltip as AnchorTooltip } from '@redocly/theme/components/Tooltip/AnchorTooltip';
 import { Tooltip as JsTooltip } from '@redocly/theme/components/Tooltip/JsTooltip';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useAnchorPositioning } from '@redocly/theme/core/hooks';
 import { getDefaultFallbackPlacements } from '@redocly/theme/core/utils';
 
 function TooltipComponent(props: TooltipProps): React.ReactElement {
-  const { useAnchorPositioning } = useThemeHooks();
   const { isSupported } = useAnchorPositioning();
 
   const fallbackPlacements =

package/src/core/constants/search.ts

@@ -44,7 +44,7 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
 
 export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 
-export const SEARCH_DEBOUNCE_TIME_MS = 300;
+export const SEARCH_DEBOUNCE_TIME_MS = 500;
 
 export const DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 

package/src/core/hooks/__mocks__/index.ts

@@ -1,5 +1,6 @@
 export * from './use-theme-config';
 export * from './use-theme-hooks';
+export * from './use-anchor-positioning';
 export * from './use-mobile-menu';
 export * from './use-controlled-state';
 export * from './search/use-recent-searches';

package/src/core/hooks/__mocks__/use-anchor-positioning.ts

@@ -0,0 +1,3 @@
+import { vi } from 'vitest';
+
+export const useAnchorPositioning = vi.fn(() => ({ isSupported: true }));

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

@@ -3,9 +3,6 @@ import { vi, type MockedFunction } from 'vitest';
 import type { ThemeHooks } from '../../types/hooks';
 
 export const useThemeHooks = vi.fn(() => ({
-  useAnchorPositioning: vi.fn(() => ({
-    isSupported: true,
-  })),
   useTranslate: vi.fn(() => ({
     translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue

package/src/core/hooks/catalog/use-catalog-entity-schema.ts

@@ -12,7 +12,7 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
 
   try {
     parsedSchema = JSON.parse(schema);
-  } catch (error) {
+  } catch {
     parsedSchema = undefined;
   }
 
@@ -22,7 +22,7 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
     parsedApiDefinition = relatedEntity?.metadata?.schema
       ? (JSON.parse(relatedEntity.metadata.schema) as Record<string, unknown>)
       : undefined;
-  } catch (err) {
+  } catch {
     parsedApiDefinition = undefined;
   }
 

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

@@ -8,8 +8,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-ignore
-  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+  constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';
     this.thresholds = [1];

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

@@ -9,8 +9,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-ignore
-  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+  constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';
     this.scrollMargin = '';

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

@@ -98,7 +98,7 @@ export function useCodeWalkthroughControls(
     Object.entries(newState).forEach(([id, control]) => {
       const existingControl = controlsState[id];
       if (existingControl && existingControl.type === control.type) {
-        // @ts-ignore
+        // @ts-expect-error
         newState[id] = {
           ...control,
           value: existingControl.value,

package/src/core/hooks/index.ts

@@ -55,3 +55,4 @@ export * from './use-toast';
 export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
+export * from './use-anchor-positioning';

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

@@ -47,9 +47,9 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
       rect.right <= (window.innerWidth || document.documentElement.clientWidth);
 
     // Only scroll if element is in viewport to prevent page jumping
-    // @ts-ignore
+    // @ts-expect-error
     if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
-      // @ts-ignore
+      // @ts-expect-error
       el.scrollIntoViewIfNeeded(centerIfNeeded);
     }
   }

package/src/core/hooks/use-anchor-positioning.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+export const useAnchorPositioning = (): { isSupported: boolean } => {
+  const [isSupported, setIsSupported] = useState(false);
+
+  useEffect(() => {
+    setIsSupported(isAnchorPositioningSupported());
+  }, []);
+
+  return { isSupported };
+};
+
+function isAnchorPositioningSupported(): boolean {
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+    return false;
+  }
+  return (
+    CSS.supports('anchor-name: --a') &&
+    CSS.supports('position-anchor: --a') &&
+    CSS.supports('top: anchor(top)')
+  );
+}

package/src/core/hooks/use-dialog-hotkeys.ts

@@ -21,12 +21,18 @@ export function useDialogHotKeys(ref: RefObject<HTMLElement | null>, onClose: ()
   };
 
   const onFocusableElementsHandler = () => {
-    const focusableElements = ref.current?.querySelectorAll(
-      'input, [href], [tabindex]:not([tabindex="-1"])',
+    const focusableElements = Array.from(
+      ref.current?.querySelectorAll<HTMLElement>(
+        'input, textarea, select, button, [href], [tabindex]:not([tabindex="-1"])',
+      ) ?? [],
+    ).filter(
+      (element) =>
+        !element.hasAttribute('disabled') &&
+        (typeof element.checkVisibility !== 'function' || element.checkVisibility()),
     );
-    if (focusableElements && focusableElements.length > 0) {
-      firstFocusableRef.current = focusableElements[0] as HTMLElement;
-      lastFocusableRef.current = focusableElements[focusableElements.length - 1] as HTMLElement;
+    if (focusableElements.length > 0) {
+      firstFocusableRef.current = focusableElements[0];
+      lastFocusableRef.current = focusableElements[focusableElements.length - 1];
     }
   };
 

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

@@ -6,7 +6,6 @@ import { ThemeDataContext } from '../contexts/ThemeDataContext';
 import { useTelemetryFallback } from './use-telemetry-fallback';
 
 const fallbacks = {
-  useAnchorPositioning: () => ({ isSupported: false }),
   useTranslate: () => ({
     translate: (value?: string, options?: { defaultValue: string } | string) =>
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',

package/src/core/types/hooks.ts

@@ -44,7 +44,6 @@ import type { BreadcrumbItem } from './breadcrumb';
 import type { AiSearchError } from '../constants/search';
 
 export type ThemeHooks = {
-  useAnchorPositioning: () => { isSupported: boolean };
   useTranslate: () => { translate: TFunction };
   useTranslationKeys: () => string[];
   /**

package/src/core/types/l10n.ts

@@ -102,6 +102,7 @@ export type TranslationKey =
   | 'search.ai.placeholder'
   | 'search.ai.generatingResponse'
   | 'search.ai.followUpQuestion'
+  | 'search.ai.send'
   | 'search.ai.suggestionsTitle'
   | 'search.ai.thinkingText'
   | 'search.ai.resourcesFound'
@@ -124,6 +125,8 @@ export type TranslationKey =
   | 'search.ai.error.header.unauthorized'
   | 'search.ai.feedback.more'
   | 'search.searchItem.deprecated'
+  | 'search.searchItem.enum'
+  | 'search.searchItem.example'
   | 'search.groups.all'
   | 'search.filter.field.footer'
   | 'aiAssistant.trigger'

package/src/core/types/search.ts

@@ -45,6 +45,8 @@ export type ParameterHighlight = {
   description: string;
   place: string;
   path: string[];
+  enum?: string;
+  example?: string;
 };
 
 export type SearchItemData = {

package/src/core/utils/load-and-navigate.ts

@@ -25,9 +25,9 @@ export async function loadAndNavigate({
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const loader = (window as any)['__LOADER'];
   const result = await withLoadProgress(loader.tryLoad(pathname));
-  // @ts-ignore
+  // @ts-expect-error
   if (result?.redirectTo) {
-    // @ts-ignore
+    // @ts-expect-error
     return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
   }
 
@@ -40,7 +40,7 @@ export async function loadAndNavigate({
         unstable_flushSync: true,
       } as NavigateOptions & { unstable_flushSync: boolean });
     }
-    // @ts-ignore
+    // @ts-expect-error
     if (result.props?.disableAutoScroll) return;
 
     if (hash) {