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

package/lib/core/hooks/use-tabs.js

@@ -6,20 +6,15 @@ const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const MORE_BUTTON_WIDTH = 80;
 const TABS_GAP = 8;
-function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
+function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
     const [tabs, setTabs] = (0, react_1.useState)({
         visible: Array.from({ length: totalTabs }, (_, i) => i),
         overflow: [],
     });
-    const [isReady, setIsReady] = (0, react_1.useState)(false);
-    const isFirstCalculation = (0, react_1.useRef)(true);
     const tabRefs = (0, react_1.useRef)([]);
     const tabWidthsRef = (0, react_1.useRef)([]);
     const tabLabelsRef = (0, react_1.useRef)([]);
-    const activeTabRef = (0, react_1.useRef)(activeTab);
-    const calculateVisibleTabsRef = (0, react_1.useRef)(null);
-    // Synchronously update ref before any callbacks or effects run
-    activeTabRef.current = activeTab;
+    const allTabsHidden = (0, react_1.useMemo)(() => tabs.visible.length === 0, [tabs.visible]);
     const setTabRef = (0, react_1.useCallback)((element, index) => {
         tabRefs.current[index] = element;
         const width = element === null || element === void 0 ? void 0 : element.offsetWidth;
@@ -30,25 +25,18 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
         if (label) {
             tabLabelsRef.current[index] = label;
         }
-        // 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 focusTab = (0, react_1.useCallback)((index) => {
+    }, []);
+    const focusTab = (index) => {
         const currentElement = tabRefs.current[index];
         currentElement === null || currentElement === void 0 ? void 0 : currentElement.focus();
-    }, []);
+    };
     const onTabSelect = (0, react_1.useCallback)((index) => {
         var _a;
         focusTab(index);
         const label = (_a = tabRefs.current[index]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
         if (label)
             onTabChange(label);
-    }, [onTabChange, focusTab]);
+    }, [onTabChange]);
     const handleKeyboard = (0, react_1.useCallback)((event, index) => {
         let newIndex = index;
         if (event.key === 'ArrowRight') {
@@ -71,155 +59,109 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
         onTabSelect(newIndex);
     }, [totalTabs, onTabSelect]);
     const replaceLastVisibleTabWithClickedOverflowTab = (0, react_1.useCallback)((clickedIndex) => {
-        setTabs((prevTabs) => {
-            const { visible: visibleTabs, overflow: overflowTabs } = prevTabs;
-            const sortedVisible = [...visibleTabs].sort((a, b) => a - b);
-            const lastVisible = sortedVisible[sortedVisible.length - 1];
-            return {
-                visible: visibleTabs.map((idx) => (idx === lastVisible ? clickedIndex : idx)),
-                overflow: overflowTabs.map((idx) => (idx === clickedIndex ? lastVisible : idx)),
-            };
+        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);
+        }
+        setTabs({
+            visible: newVisibleTabs,
+            overflow: newOverflowTabs,
         });
-    }, []);
+    }, [tabs]);
     const onTabClick = (0, react_1.useCallback)((labelOrIndex) => {
         const clickedIndex = typeof labelOrIndex === 'string'
             ? tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === labelOrIndex)
             : labelOrIndex;
         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);
-    }, [tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab, focusTab]);
+        const label = tabLabelsRef.current[clickedIndex];
+        if (label) {
+            onTabChange(label);
+            focusTab(clickedIndex);
+        }
+    }, [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab]);
     const calculateVisibleTabs = (0, react_1.useCallback)(() => {
         const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
         if (!container)
             return;
         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 === null || ref === void 0 ? void 0 : 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)
+            // 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,
         });
-        // 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)
+    }, [containerRef, activeTab]);
     (0, react_1.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
-    (0, react_1.useEffect)(() => {
-        const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-        if (!container)
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
             return;
-        let resizeTimeout = null;
-        // Use ResizeObserver to wait until container has proper size
-        const resizeObserver = new ResizeObserver(() => {
-            if (resizeTimeout)
-                cancelAnimationFrame(resizeTimeout);
-            resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
-        });
-        resizeObserver.observe(container);
+        let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         const handleResize = () => {
-            if (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
-    (0, react_1.useEffect)(() => {
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || isFirstCalculation.current)
-            return;
-        requestAnimationFrame(calculateVisibleTabs);
-    }, [activeTab, containerRef, calculateVisibleTabs]);
     return {
         setTabRef,
         onTabClick,
         handleKeyboard,
         visibleTabs: tabs.visible,
         overflowTabs: tabs.overflow,
-        isReady,
+        allTabsHidden,
     };
 }
 const useActiveTab = ({ initialTab, tabsId }) => {
     const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
-    const initialTabValue = (0, react_1.useMemo)(() => getInitialTab({ initialTab, searchParams, tabsId }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTabValue);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(getInitialTab({ initialTab, searchParams, tabsId }));
     const prevActiveTabRef = (0, react_1.useRef)(activeTab);
     (0, react_1.useEffect)(() => {
         const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
@@ -232,10 +174,10 @@ const useActiveTab = ({ initialTab, tabsId }) => {
             return searchParams;
         });
     }, [activeTab, setSearchParams, tabsId]);
-    return (0, react_1.useMemo)(() => ({
+    return {
         activeTab,
         setActiveTab,
-    }), [activeTab]);
+    };
 };
 exports.useActiveTab = useActiveTab;
 const getInitialTab = ({ initialTab, searchParams, tabsId }) => {

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -36,7 +36,6 @@ export declare const useTelemetryFallback: () => {
     sendLanguagePickerLocaleChangedMessage: () => void;
     sendSearchOpenedMessage: () => void;
     sendSearchQueryMessage: () => void;
-    sendSearchAiOpenedMessage: () => void;
     sendSearchAIQueryMessage: () => void;
     sendFeedbackMessage: () => void;
     sendSearchResultClickedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -40,7 +40,6 @@ const useTelemetryFallback = () => ({
     sendLanguagePickerLocaleChangedMessage: () => { },
     sendSearchOpenedMessage: () => { },
     sendSearchQueryMessage: () => { },
-    sendSearchAiOpenedMessage: () => { },
     sendSearchAIQueryMessage: () => { },
     sendFeedbackMessage: () => { },
     sendSearchResultClickedMessage: () => { },

package/lib/core/types/hooks.d.ts

@@ -60,7 +60,7 @@ export type ThemeHooks = {
         breadcrumbs: BreadcrumbItem[];
         currentItemSiblings?: BreadcrumbItem[];
     };
-    useSearch: (product?: string, autoSearchDisabled?: boolean, searchSessionId?: string) => {
+    useSearch: (product?: string, autoSearchDisabled?: boolean) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
         filter: SearchFilterItem[];
@@ -78,7 +78,7 @@ export type ThemeHooks = {
     };
     useAiSearch: (options?: {
         filter?: SearchFilterItem[];
-    }, searchSessionId?: string) => {
+    }) => {
         askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
         isGeneratingResponse: boolean;
         question: string;

package/lib/ext/process-scorecard.d.ts

@@ -0,0 +1,5 @@
+import type { CatalogItem } from '../index.js';
+export declare function useProcessScorecard(): {
+    processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
+    processInfo: <T>(info: T) => T;
+};

package/lib/ext/process-scorecard.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProcessScorecard = useProcessScorecard;
+const react_1 = require("react");
+function useProcessScorecard() {
+    return {
+        processScorecard: (0, react_1.useCallback)((scorecard) => scorecard, []),
+        processInfo: (0, react_1.useCallback)((info) => info, []),
+    };
+}
+//# sourceMappingURL=process-scorecard.js.map

package/lib/icons/AiStarsIcon/AiStarsIcon.js

@@ -30,27 +30,18 @@ exports.AiStarsIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 
-  ${({ background, borderRadius, margin, padding, size }) => background &&
+  ${({ background, borderRadius, margin }) => background &&
     `
       display: flex;
       align-items: center;
       justify-content: center;
-      flex-shrink: 0;
 
       background: ${(0, utils_1.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 && (0, utils_1.getCssColorVariable)(color)};

package/lib/icons/RedoclyIcon/RedoclyIcon.js

@@ -7,10 +7,13 @@ exports.RedoclyIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
-const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg" }, props),
-    react_1.default.createElement("g", null,
-        react_1.default.createElement("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" }),
-        react_1.default.createElement("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" }))));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { clipPath: "url(#clip0_4053_1165)" },
+        react_1.default.createElement("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" }),
+        react_1.default.createElement("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" })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "clip0_4053_1165" },
+            react_1.default.createElement("rect", { width: "18", height: "18", fill: "white" })))));
 exports.RedoclyIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/RedoclyIcon/RedoclyIcon',
 })) `

package/lib/index.d.ts

@@ -78,9 +78,11 @@ export * from './components/UserMenu/UserMenuMobile';
 export * from './components/Sidebar/Sidebar';
 export * from './components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from './components/OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from './components/OpenApiDocs/hooks/AfterOpenApiDescription';
 export * from './components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from './components/OpenApiDocs/hooks/OpenApiFooter';
 export * from './components/OpenApiDocs/hooks/OpenApiHeader';
+export * from './components/OpenApiDocs/hooks/AdditionalOverviewInfo';
 export * from './components/SidebarActions/ChangeViewButton';
 export * from './components/SidebarActions/SidebarActions';
 export * from './components/SidebarActions/styled';

package/lib/index.js

@@ -131,9 +131,11 @@ __exportStar(require("./components/Sidebar/Sidebar"), exports);
 /* OpenApiDocs */
 __exportStar(require("./components/OpenApiDocs/hooks/AfterOpenApiOperation"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/AfterOpenApiTitle"), exports);
+__exportStar(require("./components/OpenApiDocs/hooks/AfterOpenApiDescription"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/BeforeOpenApiOperation"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/OpenApiFooter"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/OpenApiHeader"), exports);
+__exportStar(require("./components/OpenApiDocs/hooks/AdditionalOverviewInfo"), exports);
 /* SidebarActions */
 __exportStar(require("./components/SidebarActions/ChangeViewButton"), exports);
 __exportStar(require("./components/SidebarActions/SidebarActions"), exports);

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -6,10 +6,8 @@ type TabListProps = {
     size: TabsSize;
     activeTab: string;
     onTabChange: (tab: string) => void;
-    containerRef: React.RefObject<HTMLUListElement | null>;
-    onReadyChange?: (isReady: boolean) => void;
 };
-export declare function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }: TabListProps): JSX.Element;
+export declare function TabList({ childrenArray, size, activeTab, onTabChange, }: TabListProps): JSX.Element;
 export declare const TabListContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const TabItem: import("styled-components").StyledComponent<"li", any, {
     active?: boolean;