@redocly/theme 0.59.0-rc.1 → 0.59.0

package/lib/core/hooks/use-connect-mcp-button.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectMCPButton = useConnectMCPButton;
+const react_1 = require("react");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const use_mcp_config_1 = require("./use-mcp-config");
+const clipboard_service_1 = require("../utils/clipboard-service");
+const COPIED_RESET_TIMEOUT = 1000;
+function useConnectMCPButton({ options = ['cursor', 'vscode', 'copy'], } = {}) {
+    const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { serverName, serverUrl, cursorUrl, vscodeUrl } = (0, use_mcp_config_1.useMCPConfig)();
+    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setIsCopied(false), COPIED_RESET_TIMEOUT), []);
+    const handleAction = (0, react_1.useCallback)((action) => {
+        if (action === 'copy') {
+            const config = {
+                [serverName]: {
+                    url: serverUrl,
+                    description: 'MCP Server',
+                },
+            };
+            clipboard_service_1.ClipboardService.copyCustom(JSON.stringify(config, null, 2));
+            setIsCopied(true);
+            resetCopied();
+            return;
+        }
+        const urlMap = {
+            cursor: cursorUrl,
+            vscode: vscodeUrl,
+        };
+        window.open(urlMap[action], '_blank');
+    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied]);
+    const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
+    const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
+    return {
+        isCopied,
+        cursorUrl,
+        vscodeUrl,
+        triggerButtonText,
+        visibleOptions,
+        handleAction,
+    };
+}
+//# sourceMappingURL=use-connect-mcp-button.js.map

package/lib/core/hooks/use-mcp-config.d.ts

@@ -0,0 +1,9 @@
+export type McpConfig = {
+    serverName: string;
+    origin: string;
+    serverUrl: string;
+    cursorUrl: string;
+    vscodeUrl: string;
+    isMcpDisabled: boolean;
+};
+export declare function useMCPConfig(): McpConfig;

package/lib/core/hooks/use-mcp-config.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMCPConfig = useMCPConfig;
+const react_1 = require("react");
+const use_theme_config_1 = require("./use-theme-config");
+const dom_1 = require("../utils/dom");
+const constants_1 = require("../constants");
+const mcp_1 = require("../utils/mcp");
+function useMCPConfig() {
+    var _a, _b, _c, _d, _e;
+    const themeConfig = (0, use_theme_config_1.useThemeConfig)();
+    const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
+    const serverName = ((_b = (_a = themeConfig.mcp) === null || _a === void 0 ? void 0 : _a.docs) === null || _b === void 0 ? void 0 : _b.name) || constants_1.DEFAULT_MCP_SERVER_NAME;
+    const serverUrl = `${origin}/mcp`;
+    const isMcpDisabled = ((_c = themeConfig.mcp) === null || _c === void 0 ? void 0 : _c.hide) || ((_e = (_d = themeConfig.mcp) === null || _d === void 0 ? void 0 : _d.docs) === null || _e === void 0 ? void 0 : _e.hide) || false;
+    const cursorUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('cursor', { serverName, url: serverUrl }), [serverName, serverUrl]);
+    const vscodeUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('vscode', { serverName, url: serverUrl }), [serverName, serverUrl]);
+    return {
+        serverName,
+        origin,
+        serverUrl,
+        cursorUrl,
+        vscodeUrl,
+        isMcpDisabled,
+    };
+}
+//# sourceMappingURL=use-mcp-config.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,3 +1,3 @@
 import type { PageAction } from '../types';
-export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'docs-mcp-cursor' | 'docs-mcp-vscode' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

package/lib/core/hooks/use-page-actions.js

@@ -15,13 +15,22 @@ const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
 const MarkdownFullIcon_1 = require("../../icons/MarkdownFullIcon/MarkdownFullIcon");
+const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
+const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const use_theme_hooks_1 = require("./use-theme-hooks");
 const use_theme_config_1 = require("./use-theme-config");
+const use_mcp_config_1 = require("./use-mcp-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
 const dom_1 = require("../utils/dom");
-const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
-const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'];
-const CURSOR_URL = 'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
+const mcp_1 = require("../utils/mcp");
+const DEFAULT_ENABLED_ACTIONS = [
+    'copy',
+    'view',
+    'chatgpt',
+    'claude',
+    'docs-mcp-cursor',
+    'docs-mcp-vscode',
+];
 function usePageActions(pageSlug, mcpUrl, actions) {
     var _a, _b, _c;
     const { useTranslate, usePageData, usePageProps, usePageSharedData } = (0, use_theme_hooks_1.useThemeHooks)();
@@ -29,8 +38,19 @@ function usePageActions(pageSlug, mcpUrl, actions) {
     const themeConfig = (0, use_theme_config_1.useThemeConfig)();
     const pageProps = usePageProps();
     const openApiSharedData = usePageSharedData('openAPIDocsStore');
+    const mcpConfig = (0, use_mcp_config_1.useMCPConfig)();
     const shouldHideAllActions = shouldHidePageActions(pageProps, themeConfig, (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch);
     const { isPublic } = usePageData() || {};
+    const createMCPHandler = (0, react_1.useCallback)((clientType, requiresMcpUrl = false) => () => {
+        if (requiresMcpUrl && !mcpUrl)
+            return null;
+        if (!requiresMcpUrl && (mcpUrl || mcpConfig.isMcpDisabled))
+            return null;
+        const config = requiresMcpUrl
+            ? { serverName: mcpConfig.serverName, url: mcpUrl || '' }
+            : { serverName: mcpConfig.serverName, url: mcpConfig.serverUrl || '' };
+        return createMCPAction({ clientType, mcpConfig: config, translate });
+    }, [mcpUrl, mcpConfig, translate]);
     const result = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (shouldHideAllActions) {
@@ -39,111 +59,94 @@ function usePageActions(pageSlug, mcpUrl, actions) {
         const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
         const normalizedSlug = pageSlug.startsWith('/') ? pageSlug : '/' + pageSlug;
         const mdPageUrl = new URL(origin + normalizedSlug + (normalizedSlug === '/' ? 'index.html.md' : '.md')).toString();
-        function getExternalAiPromptLink(baseUrl) {
-            const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-            const url = new URL(baseUrl);
-            url.searchParams.set('q', externalAiPrompt);
-            return url.toString();
-        }
-        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
-            .map((action) => {
-            function generateMCPConfig(isCursor) {
-                const jsonConfig = {
-                    'mcp-server': {
-                        url: mcpUrl,
-                        description: 'MCP Server',
-                    },
-                };
-                if (isCursor) {
-                    const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace('$BASE64_ENCODED_CONFIG', btoa(JSON.stringify(jsonConfig['mcp-server'])));
-                    return url;
-                }
-                return JSON.stringify(jsonConfig, null, 2);
-            }
-            switch (action) {
-                case 'mcp-cursor':
-                    if (!mcpUrl) {
-                        return null;
+        const actionHandlers = {
+            'docs-mcp-cursor': createMCPHandler('cursor'),
+            'docs-mcp-vscode': createMCPHandler('vscode'),
+            'mcp-cursor': createMCPHandler('cursor', true),
+            'mcp-vscode': createMCPHandler('vscode', true),
+            copy: () => ({
+                buttonText: translate('page.actions.copyButtonText', 'Copy'),
+                title: translate('page.actions.copyTitle', 'Copy for LLM'),
+                description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
+                iconComponent: CopyIcon_1.CopyIcon,
+                onClick: () => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const result = yield fetch(mdPageUrl);
+                        if (result.status !== 200) {
+                            return;
+                        }
+                        const text = yield result.text();
+                        clipboard_service_1.ClipboardService.copyCustom(text);
                     }
-                    return {
-                        buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
-                        title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
-                        description: translate('page.actions.cursorMcpDescription', 'Install MCP server on Cursor'),
-                        iconComponent: CursorIcon_1.CursorIcon,
-                        onClick: () => {
-                            try {
-                                const url = generateMCPConfig(true);
-                                window.open(url, '_blank');
-                            }
-                            catch (error) {
-                                console.error(error);
-                            }
-                        },
-                    };
-                case 'copy':
-                    return {
-                        buttonText: translate('page.actions.copyButtonText', 'Copy'),
-                        title: translate('page.actions.copyTitle', 'Copy for LLM'),
-                        description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
-                        iconComponent: CopyIcon_1.CopyIcon,
-                        onClick: () => __awaiter(this, void 0, void 0, function* () {
-                            try {
-                                const result = yield fetch(mdPageUrl);
-                                if (result.status !== 200) {
-                                    throw new Error('Failed to fetch markdown content');
-                                }
-                                const text = yield result.text();
-                                clipboard_service_1.ClipboardService.copyCustom(text);
-                            }
-                            catch (error) {
-                                console.error(error);
-                            }
-                        }),
-                    };
-                case 'view':
-                    return {
-                        buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
-                        title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
-                        description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
-                        iconComponent: MarkdownFullIcon_1.MarkdownFullIcon,
-                        link: mdPageUrl,
-                    };
-                case 'chatgpt':
-                    if (!isPublic) {
-                        return null;
+                    catch (error) {
+                        console.error(error);
                     }
-                    return {
-                        buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
-                        title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
-                        description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
-                        iconComponent: ChatGptIcon_1.ChatGptIcon,
-                        link: getExternalAiPromptLink('https://chat.openai.com'),
-                    };
-                case 'claude':
-                    if (!isPublic) {
-                        return null;
-                    }
-                    return {
-                        buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
-                        title: translate('page.actions.claudeTitle', 'Open in Claude'),
-                        description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
-                        iconComponent: ClaudeIcon_1.ClaudeIcon,
-                        link: getExternalAiPromptLink('https://claude.ai/new'),
-                    };
-            }
-        })
+                }),
+            }),
+            view: () => ({
+                buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
+                title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
+                description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
+                iconComponent: MarkdownFullIcon_1.MarkdownFullIcon,
+                link: mdPageUrl,
+            }),
+            chatgpt: () => {
+                if (!isPublic) {
+                    return null;
+                }
+                return {
+                    buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
+                    title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
+                    description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
+                    iconComponent: ChatGptIcon_1.ChatGptIcon,
+                    link: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
+                };
+            },
+            claude: () => {
+                if (!isPublic) {
+                    return null;
+                }
+                return {
+                    buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
+                    title: translate('page.actions.claudeTitle', 'Open in Claude'),
+                    description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
+                    iconComponent: ClaudeIcon_1.ClaudeIcon,
+                    link: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
+                };
+            },
+        };
+        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
+            .map((action) => { var _a; return (_a = actionHandlers[action]) === null || _a === void 0 ? void 0 : _a.call(actionHandlers); })
             .filter((action) => action !== null);
     }, [
         shouldHideAllActions,
         pageSlug,
         (_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items,
         actions,
-        mcpUrl,
         translate,
         isPublic,
+        createMCPHandler,
     ]);
     return result;
 }
+function getExternalAiPromptLink(baseUrl, mdPageUrl) {
+    const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
+    const url = new URL(baseUrl);
+    url.searchParams.set('q', externalAiPrompt);
+    return url.toString();
+}
+function createMCPAction({ clientType, mcpConfig, translate }) {
+    const url = (0, mcp_1.generateMCPDeepLink)(clientType, mcpConfig);
+    const sharedProps = {
+        onClick: () => {
+            window.open(url, '_blank');
+        },
+    };
+    if (clientType === 'cursor') {
+        return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), title: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), description: translate('page.actions.connectMcp.cursorDescription', 'Install MCP server on Cursor'), iconComponent: CursorIcon_1.CursorIcon });
+    }
+    return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
+}
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
     var _a, _b, _c, _d, _e, _f;
     // Can't use any actions if no markdown files are generated for LLMs

package/lib/core/hooks/use-product-picker.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProductPicker = useProductPicker;
 const react_router_dom_1 = require("react-router-dom");
 const use_theme_hooks_1 = require("./use-theme-hooks");
+const utils_1 = require("../utils");
 function useProductPicker() {
     const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, use_theme_hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
@@ -14,7 +15,7 @@ function useProductPicker() {
         if (!product)
             return;
         telemetry.sendProductPickedMessage({ product: product.slug });
-        loadAndNavigate({ navigate, to: product.link });
+        loadAndNavigate({ navigate, to: (0, utils_1.withPathPrefix)(product.link) });
     }
     return {
         currentProduct,

package/lib/core/hooks/use-tabs.d.ts

@@ -4,18 +4,19 @@ type UseTabsProps = {
     totalTabs: number;
     containerRef?: React.RefObject<HTMLElement | null>;
 };
-export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
+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[];
-    allTabsHidden: boolean;
+    isReady: boolean;
 };
 type UseActiveTabProps = {
     initialTab: string;
     tabsId?: string;
 };
+export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }: UseTabsProps): UseTabsReturn;
 export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
     activeTab: string;
     setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;

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

@@ -6,15 +6,20 @@ 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 allTabsHidden = (0, react_1.useMemo)(() => tabs.visible.length === 0, [tabs.visible]);
+    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 setTabRef = (0, react_1.useCallback)((element, index) => {
         tabRefs.current[index] = element;
         const width = element === null || element === void 0 ? void 0 : element.offsetWidth;
@@ -25,18 +30,25 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
         if (label) {
             tabLabelsRef.current[index] = label;
         }
-    }, []);
-    const focusTab = (index) => {
+        // 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 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]);
+    }, [onTabChange, focusTab]);
     const handleKeyboard = (0, react_1.useCallback)((event, index) => {
         let newIndex = index;
         if (event.key === 'ArrowRight') {
@@ -59,109 +71,155 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
         onTabSelect(newIndex);
     }, [totalTabs, onTabSelect]);
     const replaceLastVisibleTabWithClickedOverflowTab = (0, react_1.useCallback)((clickedIndex) => {
-        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,
+        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)),
+            };
         });
-    }, [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 hasOverflowTabs = tabs.overflow.length > 0;
-        if (hasOverflowTabs && !allTabsHidden && tabs.overflow.includes(clickedIndex)) {
-            replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
-        }
         const label = tabLabelsRef.current[clickedIndex];
-        if (label) {
-            onTabChange(label);
-            focusTab(clickedIndex);
+        if (!label)
+            return;
+        // If this is an overflow tab, replace it with a visible one
+        if (tabs.overflow.includes(clickedIndex)) {
+            replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
         }
-    }, [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab]);
+        onTabChange(label);
+        focusTab(clickedIndex);
+    }, [tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab, focusTab]);
     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 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
+        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);
         let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
-        const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
-        const overflow = [];
+        const visibleTabs = activeTabIndex !== -1 ? [activeTabIndex] : [];
+        const overflowTabs = [];
         for (let i = 0; i < tabWidths.length; i++) {
-            // Skip active tab, it was added initially
-            if (i === activeTabIndex) {
+            if (i === activeTabIndex)
                 continue;
-            }
             const tabWidthWithGap = tabWidths[i] + TABS_GAP;
             const projectedWidth = tabsWidth + tabWidthWithGap;
             if (projectedWidth <= containerWidth) {
-                visible.push(i);
+                visibleTabs.push(i);
                 tabsWidth += tabWidthWithGap;
             }
             else {
-                overflow.push(i);
+                overflowTabs.push(i);
             }
         }
-        if (overflow.length > 0) {
+        if (overflowTabs.length > 0) {
             tabsWidth += MORE_BUTTON_WIDTH;
-            // 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);
+            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);
                     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,
-            overflow,
+            visible: visibleTabs,
+            overflow: overflowTabs,
         });
-    }, [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)
     (0, react_1.useEffect)(() => {
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+        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)
             return;
-        let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
+        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);
         const handleResize = () => {
-            if (resizeTimeout) {
+            if (resizeTimeout)
                 cancelAnimationFrame(resizeTimeout);
-            }
             resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         };
         window.addEventListener('resize', handleResize);
         return () => {
+            resizeObserver.disconnect();
             window.removeEventListener('resize', handleResize);
-            cancelAnimationFrame(resizeTimeout);
+            if (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,
-        allTabsHidden,
+        isReady,
     };
 }
 const useActiveTab = ({ initialTab, tabsId }) => {
     const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
-    const [activeTab, setActiveTab] = (0, react_1.useState)(getInitialTab({ initialTab, searchParams, tabsId }));
+    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 prevActiveTabRef = (0, react_1.useRef)(activeTab);
     (0, react_1.useEffect)(() => {
         const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
@@ -174,10 +232,10 @@ const useActiveTab = ({ initialTab, tabsId }) => {
             return searchParams;
         });
     }, [activeTab, setSearchParams, tabsId]);
-    return {
+    return (0, react_1.useMemo)(() => ({
         activeTab,
         setActiveTab,
-    };
+    }), [activeTab]);
 };
 exports.useActiveTab = useActiveTab;
 const getInitialTab = ({ initialTab, searchParams, tabsId }) => {