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

package/lib/components/Select/SelectInput.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/Sidebar/Sidebar.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/SidebarActions/styled.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ControlsWrapChangeLayoutButtons = exports.ControlsWrap = exports.StyledChangeViewButtonWrap = exports.StyledChangeViewButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));

package/lib/components/SkipContent/SkipContent.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/Switch/Switch.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/TableOfContent/TableOfContent.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/Tooltip/Tooltip.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 exports.TooltipComponent = TooltipComponent;

package/lib/components/VersionPicker/VersionPicker.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/core/constants/search.d.ts

@@ -6,10 +6,11 @@ export declare enum AiSearchError {
     EmptyResponse = "empty_response",
     ErrorProcessingResponse = "error_processing_response"
 }
-export declare const enum AiSearchConversationRole {
-    USER = "user",
-    ASSISTANT = "assistant"
-}
+export declare const AiSearchConversationRole: {
+    readonly USER: "user";
+    readonly ASSISTANT: "assistant";
+};
+export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;

package/lib/core/constants/search.js

@@ -9,11 +9,10 @@ var AiSearchError;
     AiSearchError["EmptyResponse"] = "empty_response";
     AiSearchError["ErrorProcessingResponse"] = "error_processing_response";
 })(AiSearchError || (exports.AiSearchError = AiSearchError = {}));
-var AiSearchConversationRole;
-(function (AiSearchConversationRole) {
-    AiSearchConversationRole["USER"] = "user";
-    AiSearchConversationRole["ASSISTANT"] = "assistant";
-})(AiSearchConversationRole || (exports.AiSearchConversationRole = AiSearchConversationRole = {}));
+exports.AiSearchConversationRole = {
+    USER: 'user',
+    ASSISTANT: 'assistant',
+};
 const defaultErrorConfig = {
     headerKey: 'search.ai.error.header',
     headerDefault: 'Oops! Something went wrong.',

package/lib/core/contexts/CodeSnippetContext.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveCodeSnippetId = exports.useCodeSnippetContext = exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
 exports.CodeSnippetProvider = CodeSnippetProvider;

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 }) => {

package/lib/core/templates/Markdown.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const React = __importStar(require("react"));