@redocly/theme 0.59.0-next.2 → 0.59.0-rc.1

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

@@ -13,75 +13,39 @@ type Tabs = {
   overflow: number[];
 };
 
-type UseTabsReturn = {
-  setTabRef: (element: HTMLButtonElement | null, index: number) => void;
-  onTabClick: (labelOrIndex: string | number) => void;
-  handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
-  visibleTabs: number[];
-  overflowTabs: number[];
-  isReady: boolean;
-};
-
-type UseActiveTabProps = {
-  initialTab: string;
-  tabsId?: string;
-};
-
 const MORE_BUTTON_WIDTH = 80;
 const TABS_GAP = 8;
 
-export function useTabs({
-  activeTab,
-  onTabChange,
-  totalTabs,
-  containerRef,
-}: UseTabsProps): UseTabsReturn {
+export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps) {
   const [tabs, setTabs] = useState<Tabs>({
     visible: Array.from({ length: totalTabs }, (_, i) => i),
     overflow: [],
   });
-  const [isReady, setIsReady] = useState(false);
-  const isFirstCalculation = useRef(true);
+
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
   const tabWidthsRef = useRef<number[]>([]);
   const tabLabelsRef = useRef<string[]>([]);
-  const activeTabRef = useRef(activeTab);
-  const calculateVisibleTabsRef = useRef<(() => void) | null>(null);
 
-  // Synchronously update ref before any callbacks or effects run
-  activeTabRef.current = activeTab;
+  const allTabsHidden = useMemo(() => tabs.visible.length === 0, [tabs.visible]);
 
-  const setTabRef = useCallback(
-    (element: HTMLButtonElement | null, index: number) => {
-      tabRefs.current[index] = element;
+  const setTabRef = useCallback((element: HTMLButtonElement | null, index: number) => {
+    tabRefs.current[index] = element;
 
-      const width = element?.offsetWidth;
-      if (width) {
-        tabWidthsRef.current[index] = width;
-      }
-
-      const label = element?.getAttribute('data-label');
-      if (label) {
-        tabLabelsRef.current[index] = label;
-      }
+    const width = element?.offsetWidth;
+    if (width) {
+      tabWidthsRef.current[index] = width;
+    }
 
-      // Trigger calculation once all tabs are registered
-      if (
-        isFirstCalculation.current &&
-        tabWidthsRef.current.length >= totalTabs &&
-        tabLabelsRef.current.length >= totalTabs &&
-        calculateVisibleTabsRef.current
-      ) {
-        requestAnimationFrame(calculateVisibleTabsRef.current);
-      }
-    },
-    [totalTabs],
-  );
+    const label = element?.getAttribute('data-label');
+    if (label) {
+      tabLabelsRef.current[index] = label;
+    }
+  }, []);
 
-  const focusTab = useCallback((index: number) => {
+  const focusTab = (index: number) => {
     const currentElement = tabRefs.current[index];
     currentElement?.focus();
-  }, []);
+  };
 
   const onTabSelect = useCallback(
     (index: number) => {
@@ -89,7 +53,7 @@ export function useTabs({
       const label = tabRefs.current[index]?.getAttribute('data-label');
       if (label) onTabChange(label);
     },
-    [onTabChange, focusTab],
+    [onTabChange],
   );
 
   const handleKeyboard = useCallback(
@@ -113,19 +77,30 @@ export function useTabs({
     [totalTabs, onTabSelect],
   );
 
-  const replaceLastVisibleTabWithClickedOverflowTab = useCallback((clickedIndex: number) => {
-    setTabs((prevTabs) => {
-      const { visible: visibleTabs, overflow: overflowTabs } = prevTabs;
-
-      const sortedVisible = [...visibleTabs].sort((a, b) => a - b);
-      const lastVisible = sortedVisible[sortedVisible.length - 1];
+  const replaceLastVisibleTabWithClickedOverflowTab = useCallback(
+    (clickedIndex: number) => {
+      const { visible: visibleTabs, overflow: overflowTabs } = tabs;
+
+      // Indexes of visible tabs should be sorted(asc), to replace the last visible tab with the clicked tab
+      const newVisibleTabs = [...visibleTabs].sort((a, b) => a - b);
+      const newOverflowTabs = [...overflowTabs];
+
+      const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
+      if (clickedIdxInOverflow !== -1) {
+        const lastVisible = newVisibleTabs[newVisibleTabs.length - 1];
+        newOverflowTabs.splice(clickedIdxInOverflow, 1);
+        newOverflowTabs.unshift(lastVisible);
+        newVisibleTabs.splice(newVisibleTabs.length - 1, 1);
+        newVisibleTabs.unshift(clickedIndex);
+      }
 
-      return {
-        visible: visibleTabs.map((idx) => (idx === lastVisible ? clickedIndex : idx)),
-        overflow: overflowTabs.map((idx) => (idx === clickedIndex ? lastVisible : idx)),
-      };
-    });
-  }, []);
+      setTabs({
+        visible: newVisibleTabs,
+        overflow: newOverflowTabs,
+      });
+    },
+    [tabs],
+  );
 
   const onTabClick = useCallback(
     (labelOrIndex: string | number) => {
@@ -136,18 +111,18 @@ export function useTabs({
 
       if (clickedIndex === -1) return;
 
-      const label = tabLabelsRef.current[clickedIndex];
-      if (!label) return;
-
-      // If this is an overflow tab, replace it with a visible one
-      if (tabs.overflow.includes(clickedIndex)) {
+      const hasOverflowTabs = tabs.overflow.length > 0;
+      if (hasOverflowTabs && !allTabsHidden && tabs.overflow.includes(clickedIndex)) {
         replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
       }
 
-      onTabChange(label);
-      focusTab(clickedIndex);
+      const label = tabLabelsRef.current[clickedIndex];
+      if (label) {
+        onTabChange(label);
+        focusTab(clickedIndex);
+      }
     },
-    [tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab, focusTab],
+    [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab],
   );
 
   const calculateVisibleTabs = useCallback(() => {
@@ -156,141 +131,87 @@ export function useTabs({
 
     const containerWidth = container.offsetWidth;
     const tabWidths = tabWidthsRef.current;
-    const tabLabels = tabLabelsRef.current;
-
-    // Wait until all tabs are registered before calculating
-    if (tabWidths.length < totalTabs || tabLabels.length < totalTabs) {
-      return;
-    }
-
-    // Check if container has proper width (not zero)
-    if (containerWidth === 0) {
-      return;
-    }
-
-    // Find active tab index by label in tabLabelsRef, not by DOM element
-    // because tab might not be rendered if it's in overflow
-    const activeTabIndex = tabLabels.findIndex((label) => label === activeTabRef.current);
+    const activeTabIndex = tabRefs.current.findIndex(
+      (ref) => ref?.getAttribute('data-label') === activeTab,
+    );
 
+    // Active tab should always be visible, so we include it at the beginning of the array
     let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
-    const visibleTabs = activeTabIndex !== -1 ? [activeTabIndex] : [];
-    const overflowTabs = [];
+    const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
+    const overflow = [];
 
     for (let i = 0; i < tabWidths.length; i++) {
-      if (i === activeTabIndex) continue;
+      // Skip active tab, it was added initially
+      if (i === activeTabIndex) {
+        continue;
+      }
 
       const tabWidthWithGap = tabWidths[i] + TABS_GAP;
       const projectedWidth = tabsWidth + tabWidthWithGap;
 
       if (projectedWidth <= containerWidth) {
-        visibleTabs.push(i);
+        visible.push(i);
         tabsWidth += tabWidthWithGap;
       } else {
-        overflowTabs.push(i);
+        overflow.push(i);
       }
     }
 
-    if (overflowTabs.length > 0) {
+    if (overflow.length > 0) {
       tabsWidth += MORE_BUTTON_WIDTH;
 
-      while (tabsWidth > containerWidth && visibleTabs.length > 1) {
-        const removed = visibleTabs.pop();
-        // Never remove the active tab - it should always stay visible or be the last one
-        if (removed !== undefined && removed !== activeTabIndex) {
-          overflowTabs.unshift(removed);
+      // Remove tabs starting from the end of the array until the width of the visible tabs is less than the container width
+      while (tabsWidth > containerWidth && visible.length) {
+        const removed = visible.pop();
+        if (removed !== undefined) {
+          overflow.unshift(removed);
           tabsWidth -= tabWidths[removed];
-        } else if (removed === activeTabIndex) {
-          // Put it back if we accidentally removed the active tab
-          visibleTabs.push(removed);
-          break;
         }
       }
-
-      // If even with only the active tab visible, it doesn't fit with More button,
-      // move all tabs to overflow (show only dropdown)
-      if (tabsWidth > containerWidth && visibleTabs.length === 1) {
-        overflowTabs.unshift(...visibleTabs);
-        visibleTabs.length = 0;
-      }
     }
 
     setTabs({
-      visible: visibleTabs,
-      overflow: overflowTabs,
+      visible,
+      overflow,
     });
+  }, [containerRef, activeTab]);
 
-    // Set ready state on first calculation
-    if (isFirstCalculation.current) {
-      isFirstCalculation.current = false;
-      setIsReady(true);
-    }
-  }, [containerRef, totalTabs]);
-
-  // Store calculateVisibleTabs in ref for use in setTabRef
-  calculateVisibleTabsRef.current = calculateVisibleTabs;
-
-  // Reset isFirstCalculation when totalTabs changes (new page/tabs)
-  useEffect(() => {
-    isFirstCalculation.current = true;
-    setIsReady(false);
-    // Clear refs so we wait for new tabs to register
-    tabWidthsRef.current = [];
-    tabLabelsRef.current = [];
-  }, [totalTabs]);
-
-  // Call calculateVisibleTabs on first render and resize
   useEffect(() => {
-    const container = containerRef?.current;
-    if (!container) return;
-
-    let resizeTimeout: number | null = null;
-
-    // Use ResizeObserver to wait until container has proper size
-    const resizeObserver = new ResizeObserver(() => {
-      if (resizeTimeout) cancelAnimationFrame(resizeTimeout);
-      resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
-    });
-
-    resizeObserver.observe(container);
+    if (!containerRef?.current) return;
 
+    let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
     const handleResize = () => {
-      if (resizeTimeout) cancelAnimationFrame(resizeTimeout);
+      if (resizeTimeout) {
+        cancelAnimationFrame(resizeTimeout);
+      }
       resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
     };
 
     window.addEventListener('resize', handleResize);
-
     return () => {
-      resizeObserver.disconnect();
       window.removeEventListener('resize', handleResize);
-      if (resizeTimeout) cancelAnimationFrame(resizeTimeout);
+      cancelAnimationFrame(resizeTimeout);
     };
   }, [containerRef, totalTabs, calculateVisibleTabs]);
 
-  // Recalculate when activeTab changes to ensure it's visible
-  useEffect(() => {
-    if (!containerRef?.current || isFirstCalculation.current) return;
-    requestAnimationFrame(calculateVisibleTabs);
-  }, [activeTab, containerRef, calculateVisibleTabs]);
-
   return {
     setTabRef,
     onTabClick,
     handleKeyboard,
     visibleTabs: tabs.visible,
     overflowTabs: tabs.overflow,
-    isReady,
+    allTabsHidden,
   };
 }
 
+type UseActiveTabProps = {
+  initialTab: string;
+  tabsId?: string;
+};
+
 export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const initialTabValue = useMemo(
-    () => getInitialTab({ initialTab, searchParams, tabsId }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-  const [activeTab, setActiveTab] = useState(initialTabValue);
+  const [activeTab, setActiveTab] = useState(getInitialTab({ initialTab, searchParams, tabsId }));
   const prevActiveTabRef = useRef(activeTab);
 
   useEffect(() => {
@@ -307,13 +228,10 @@ export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
     });
   }, [activeTab, setSearchParams, tabsId]);
 
-  return useMemo(
-    () => ({
-      activeTab,
-      setActiveTab,
-    }),
-    [activeTab],
-  );
+  return {
+    activeTab,
+    setActiveTab,
+  };
 };
 
 type GetInitialTabProps = {

package/src/core/types/hooks.ts

@@ -86,7 +86,6 @@ export type ThemeHooks = {
   useSearch: (
     product?: string,
     autoSearchDisabled?: boolean,
-    searchSessionId?: string,
   ) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
@@ -108,10 +107,7 @@ export type ThemeHooks = {
     advancedSearch?: boolean;
     askAi?: boolean;
   };
-  useAiSearch: (
-    options?: { filter?: SearchFilterItem[] },
-    searchSessionId?: string,
-  ) => {
+  useAiSearch: (options?: { filter?: SearchFilterItem[] }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
     question: string;

package/src/ext/process-scorecard.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+import type { CatalogItem } from '@redocly/theme';
+
+export function useProcessScorecard(): {
+  processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
+  processInfo: <T>(info: T) => T;
+} {
+  return {
+    processScorecard: useCallback((scorecard) => scorecard, []),
+    processInfo: useCallback((info) => info, []),
+  };
+}

package/src/icons/AiStarsIcon/AiStarsIcon.tsx

@@ -35,28 +35,19 @@ export const AiStarsIcon = styled(Icon).attrs(() => ({
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 
-  ${({ background, borderRadius, margin, padding, size }) =>
+  ${({ background, borderRadius, margin }) =>
     background &&
     `
       display: flex;
       align-items: center;
       justify-content: center;
-      flex-shrink: 0;
 
       background: ${getCssColorVariable(background)};
-      width: ${size || '16px'};
-      height: ${size || '16px'};
 
-      padding: ${padding || 'var(--spacing-xs)'};
+      padding: var(--spacing-xs);
       margin: ${margin || '0'};
       
       border-radius: ${background && borderRadius ? borderRadius : 'none'};
-      
-      svg {
-        width: calc(${size || '16px'} - 2 * (${padding || 'var(--spacing-xs)'}));
-        height: calc(${size || '16px'} - 2 * (${padding || 'var(--spacing-xs)'}));
-        flex-shrink: 0;
-      }
     `}
 
   color: ${({ color }) => color && getCssColorVariable(color)};

package/src/icons/RedoclyIcon/RedoclyIcon.tsx

@@ -6,11 +6,29 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 const Icon = (props: IconProps) => (
-  <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <g>
-      <path d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z" />
-      <path d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z" />
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_4053_1165)">
+      <path
+        d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z"
+        fill="#2467F2"
+      />
+      <path
+        d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z"
+        fill="#2467F2"
+      />
     </g>
+    <defs>
+      <clipPath id="clip0_4053_1165">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
   </svg>
 );
 

package/src/index.ts

@@ -93,9 +93,11 @@ export * from '@redocly/theme/components/Sidebar/Sidebar';
 /* OpenApiDocs */
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiDescription';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiFooter';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader';
+export * from '@redocly/theme/components/OpenApiDocs/hooks/AdditionalOverviewInfo';
 /* SidebarActions */
 export * from '@redocly/theme/components/SidebarActions/ChangeViewButton';
 export * from '@redocly/theme/components/SidebarActions/SidebarActions';