@redocly/theme 0.58.0 → 0.59.0-next.0

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

@@ -1,98 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveTab = void 0;
 exports.useTabs = useTabs;
 const react_1 = require("react");
-function useTabs({ initialTab, totalTabs, containerRef }) {
-    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
-    const [visibleTabs, setVisibleTabs] = (0, react_1.useState)(Array.from({ length: totalTabs }, (_, i) => i));
-    const [overflowTabs, setOverflowTabs] = (0, react_1.useState)([]);
-    const [allTabsHidden, setAllTabsHidden] = (0, react_1.useState)(false);
+const react_router_dom_1 = require("react-router-dom");
+const MORE_BUTTON_WIDTH = 80;
+const TABS_GAP = 8;
+function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
+    const [tabs, setTabs] = (0, react_1.useState)({
+        visible: Array.from({ length: totalTabs }, (_, i) => i),
+        overflow: [],
+    });
     const tabRefs = (0, react_1.useRef)([]);
+    const tabWidthsRef = (0, react_1.useRef)([]);
     const tabLabelsRef = (0, react_1.useRef)([]);
-    const resizeTimeoutRef = (0, react_1.useRef)(undefined);
-    const [ready, setReady] = (0, react_1.useState)(false);
-    const hasCalculatedOnce = (0, react_1.useRef)(false);
-    const lastWidthRef = (0, react_1.useRef)(0);
-    const originalOrderRef = (0, react_1.useRef)([]);
-    (0, react_1.useEffect)(() => {
-        originalOrderRef.current = Array.from({ length: totalTabs }, (_, i) => i);
-    }, [totalTabs]);
+    const allTabsHidden = (0, react_1.useMemo)(() => tabs.visible.length === 0, [tabs.visible]);
     const setTabRef = (0, react_1.useCallback)((element, index) => {
         tabRefs.current[index] = element;
-        if (element) {
-            const label = element.getAttribute('data-label');
-            if (label) {
-                tabLabelsRef.current[index] = label;
-            }
+        const width = element === null || element === void 0 ? void 0 : element.offsetWidth;
+        if (width) {
+            tabWidthsRef.current[index] = width;
+        }
+        const label = element === null || element === void 0 ? void 0 : element.getAttribute('data-label');
+        if (label) {
+            tabLabelsRef.current[index] = label;
         }
-    }, []);
-    const getTabId = (0, react_1.useCallback)((label, index) => {
-        const cleanLabel = label.replace(/\s+/g, '-').toLowerCase();
-        return `${cleanLabel}-${index}`;
     }, []);
     const focusTab = (index) => {
         const currentElement = tabRefs.current[index];
-        if (currentElement) {
-            currentElement.focus();
-        }
+        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)
-            setActiveTab(label);
-    }, []);
-    const onTabClick = (0, react_1.useCallback)((labelOrIndex) => {
-        var _a;
-        let clickedIndex;
-        if (typeof labelOrIndex === 'string') {
-            clickedIndex = tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === labelOrIndex);
-            if (clickedIndex === -1)
-                return;
-        }
-        else {
-            clickedIndex = labelOrIndex;
-        }
-        if (allTabsHidden) {
-            const label = tabLabelsRef.current[clickedIndex];
-            if (label) {
-                setActiveTab(label);
-                focusTab(clickedIndex);
-            }
-            return;
-        }
-        if (overflowTabs.includes(clickedIndex)) {
-            const newVisibleTabs = [...visibleTabs];
-            const newOverflowTabs = [...overflowTabs];
-            const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
-            if (clickedIdxInOverflow !== -1) {
-                newOverflowTabs.splice(clickedIdxInOverflow, 1);
-            }
-            const lastVisible = newVisibleTabs.pop();
-            if (lastVisible !== undefined) {
-                newOverflowTabs.unshift(lastVisible);
-            }
-            newVisibleTabs.push(clickedIndex);
-            setVisibleTabs(newVisibleTabs);
-            setOverflowTabs(newOverflowTabs);
-            requestAnimationFrame(() => {
-                var _a;
-                const label = (_a = tabRefs.current[clickedIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
-                if (label) {
-                    setActiveTab(label);
-                    focusTab(clickedIndex);
-                }
-            });
-        }
-        else {
-            const label = (_a = tabRefs.current[clickedIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
-            if (label) {
-                setActiveTab(label);
-                focusTab(clickedIndex);
-            }
-        }
-    }, [visibleTabs, overflowTabs, allTabsHidden]);
+            onTabChange(label);
+    }, [onTabChange]);
     const handleKeyboard = (0, react_1.useCallback)((event, index) => {
         let newIndex = index;
         if (event.key === 'ArrowRight') {
@@ -114,168 +58,134 @@ function useTabs({ initialTab, 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,
+        });
+    }, [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);
+        }
+    }, [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 contentWrapper = container.closest('div');
-        if (!contentWrapper) {
-            setVisibleTabs(Array.from({ length: totalTabs }, (_, i) => i));
-            setOverflowTabs([]);
-            setAllTabsHidden(false);
-            return;
-        }
-        const containerWidth = container.offsetWidth - 60;
-        const tabElements = container.querySelectorAll('[role="tab"]');
-        const moreButtonWidth = 80;
-        const safetyMargin = 20;
-        const tabWidths = Array.from(tabElements).map((el) => el.offsetWidth);
-        const tabLabels = Array.from(tabElements).map((el) => el.getAttribute('data-label') || '');
-        const tabTypes = Array.from(tabElements).map((el) => el.getAttribute('data-type') || '');
-        const hasLongLabels = tabLabels.some((label) => label.length > 30);
-        const minVisibleTabs = hasLongLabels ? 1 : 2;
+        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);
-        let currentWidth = 0;
-        const visible = [];
+        // Active tab should always be visible, so we include it at the beginning of the array
+        let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
+        const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
         const overflow = [];
-        let minTabsWidth = 0;
-        Array.from({ length: minVisibleTabs }).forEach((_, i) => {
-            if (i < tabWidths.length) {
-                minTabsWidth += tabWidths[i] + (i > 0 ? moreButtonWidth + safetyMargin : 0);
+        for (let i = 0; i < tabWidths.length; i++) {
+            // Skip active tab, it was added initially
+            if (i === activeTabIndex) {
+                continue;
             }
-        });
-        if (minTabsWidth > containerWidth) {
-            setVisibleTabs([]);
-            setOverflowTabs(Array.from({ length: totalTabs }, (_, i) => i));
-            setAllTabsHidden(true);
-            return;
-        }
-        const tabsByType = new Map();
-        Array.from({ length: totalTabs }).forEach((_, i) => {
-            var _a;
-            const type = tabTypes[i] || 'default';
-            if (!tabsByType.has(type)) {
-                tabsByType.set(type, []);
+            const tabWidthWithGap = tabWidths[i] + TABS_GAP;
+            const projectedWidth = tabsWidth + tabWidthWithGap;
+            if (projectedWidth <= containerWidth) {
+                visible.push(i);
+                tabsWidth += tabWidthWithGap;
             }
-            (_a = tabsByType.get(type)) === null || _a === void 0 ? void 0 : _a.push(i);
-        });
-        tabsByType.forEach((tabIndices) => {
-            let typeCurrentWidth = currentWidth;
-            const typeVisible = [];
-            const typeOverflow = [];
-            tabIndices.slice(0, minVisibleTabs).forEach((tabIndex) => {
-                const tabWidth = tabWidths[tabIndex];
-                const projectedWidth = typeCurrentWidth +
-                    tabWidth +
-                    (typeVisible.length > 0 ? moreButtonWidth + safetyMargin : 0);
-                if (projectedWidth <= containerWidth) {
-                    typeVisible.push(tabIndex);
-                    typeCurrentWidth += tabWidth;
-                }
-                else {
-                    typeOverflow.push(tabIndex);
-                }
-            });
-            tabIndices.slice(minVisibleTabs).forEach((tabIndex) => {
-                const tabWidth = tabWidths[tabIndex];
-                const projectedWidth = typeCurrentWidth + tabWidth + moreButtonWidth + safetyMargin;
-                if (projectedWidth <= containerWidth) {
-                    typeVisible.push(tabIndex);
-                    typeCurrentWidth += tabWidth;
-                }
-                else {
-                    typeOverflow.push(tabIndex);
-                }
-            });
-            visible.push(...typeVisible);
-            overflow.push(...typeOverflow);
-            currentWidth = typeCurrentWidth;
-        });
-        if (activeTabIndex !== -1 && !visible.includes(activeTabIndex)) {
-            if (visible.length > 0) {
+            else {
+                overflow.push(i);
+            }
+        }
+        if (overflow.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);
+                    tabsWidth -= tabWidths[removed];
                 }
             }
-            visible.push(activeTabIndex);
-            const activeOverflowIndex = overflow.indexOf(activeTabIndex);
-            if (activeOverflowIndex !== -1)
-                overflow.splice(activeOverflowIndex, 1);
         }
-        setVisibleTabs(visible);
-        setOverflowTabs(overflow);
-        setAllTabsHidden(visible.length === 0);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [containerRef, totalTabs]);
+        setTabs({
+            visible,
+            overflow,
+        });
+    }, [containerRef, activeTab]);
     (0, react_1.useEffect)(() => {
         if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
             return;
-        const ensureTabsReady = () => {
-            const allTabsReady = tabRefs.current.length === totalTabs && tabRefs.current.every((tab) => tab === null || tab === void 0 ? void 0 : tab.offsetWidth);
-            if (!allTabsReady) {
-                resizeTimeoutRef.current = requestAnimationFrame(ensureTabsReady);
-                return;
-            }
-            calculateVisibleTabs();
-            hasCalculatedOnce.current = true;
-        };
-        resizeTimeoutRef.current = requestAnimationFrame(ensureTabsReady);
-        let resizeTimeout;
+        let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         const handleResize = () => {
-            if (!hasCalculatedOnce.current)
-                return;
             if (resizeTimeout) {
                 cancelAnimationFrame(resizeTimeout);
             }
-            resizeTimeout = requestAnimationFrame(() => {
-                if (resizeTimeoutRef.current) {
-                    cancelAnimationFrame(resizeTimeoutRef.current);
-                }
-                resizeTimeoutRef.current = requestAnimationFrame(() => {
-                    const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-                    if (!container)
-                        return;
-                    const currentWidth = container.offsetWidth;
-                    if (Math.abs(lastWidthRef.current - currentWidth) > 5) {
-                        lastWidthRef.current = currentWidth;
-                        calculateVisibleTabs();
-                    }
-                });
-            });
+            resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         };
-        const resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(containerRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            resizeObserver.disconnect();
             window.removeEventListener('resize', handleResize);
-            if (resizeTimeoutRef.current) {
-                cancelAnimationFrame(resizeTimeoutRef.current);
-            }
-            if (resizeTimeout) {
-                cancelAnimationFrame(resizeTimeout);
-            }
+            cancelAnimationFrame(resizeTimeout);
         };
     }, [containerRef, totalTabs, calculateVisibleTabs]);
-    (0, react_1.useEffect)(() => {
-        const raf = requestAnimationFrame(() => {
-            setReady(true);
-            calculateVisibleTabs();
-        });
-        return () => cancelAnimationFrame(raf);
-    }, [calculateVisibleTabs]);
     return {
-        activeTab,
-        setActiveTab,
         setTabRef,
         onTabClick,
         handleKeyboard,
-        getTabId,
-        visibleTabs,
-        overflowTabs,
-        ready,
+        visibleTabs: tabs.visible,
+        overflowTabs: tabs.overflow,
         allTabsHidden,
     };
 }
+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 prevActiveTabRef = (0, react_1.useRef)(activeTab);
+    (0, react_1.useEffect)(() => {
+        const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
+        if (!tabsId || !hasActiveTabChanged) {
+            return;
+        }
+        prevActiveTabRef.current = activeTab;
+        setSearchParams((searchParams) => {
+            searchParams.set(tabsId, activeTab);
+            return searchParams;
+        });
+    }, [activeTab, setSearchParams, tabsId]);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+exports.useActiveTab = useActiveTab;
+const getInitialTab = ({ initialTab, searchParams, tabsId }) => {
+    let resultTab = initialTab;
+    if (tabsId) {
+        const tabFromUrl = searchParams.get(tabsId);
+        resultTab = tabFromUrl ? tabFromUrl : resultTab;
+    }
+    return resultTab;
+};
 //# sourceMappingURL=use-tabs.js.map

package/lib/core/utils/index.d.ts

@@ -37,3 +37,4 @@ export * from './lang-to-name';
 export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
+export * from './tabs';

package/lib/core/utils/index.js

@@ -53,4 +53,5 @@ __exportStar(require("./lang-to-name"), exports);
 __exportStar(require("./enhanced-smoothstep"), exports);
 __exportStar(require("./icon-resolver"), exports);
 __exportStar(require("./dynamic"), exports);
+__exportStar(require("./tabs"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/tabs.d.ts

@@ -0,0 +1 @@
+export declare function getTabId(label: string, index: number): string;

package/lib/core/utils/tabs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTabId = getTabId;
+function getTabId(label, index) {
+    const cleanLabel = label.replace(/\s+/g, '-').toLowerCase();
+    return `${cleanLabel}-${index}`;
+}
+//# sourceMappingURL=tabs.js.map

package/lib/markdoc/components/Tabs/Tab.js

@@ -11,7 +11,7 @@ const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
 function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
-        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
+        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, "data-label": label, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
             react_1.default.createElement(LabelWrapper, null,
                 react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }),
                 label))));

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

@@ -4,22 +4,10 @@ import { TabItemProps, TabsSize } from '../../../markdoc/components/Tabs/Tabs';
 type TabListProps = {
     childrenArray: React.ReactElement<TabItemProps>[];
     size: TabsSize;
-    overflowTabs: number[];
-    visibleTabs: number[];
-    setTabRef: (element: HTMLButtonElement | null, index: number) => void;
-    onTabClick: (labelOrIndex: string | number) => void;
-    handleKeyboard: (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
-    getTabId: (label: string, index: number) => string;
     activeTab: string;
-    isAnimating: boolean;
-    highlightStyle: {
-        left: number;
-        width: number;
-    };
-    allTabsHidden: boolean;
-    tabsContainerRef: React.RefObject<HTMLUListElement | null>;
+    onTabChange: (tab: string) => void;
 };
-export declare function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }: 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;

package/lib/markdoc/components/Tabs/TabList.js

@@ -22,35 +22,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../../components/Button/Button");
-function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }) {
-    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef, "data-animating": isAnimating },
-        react_1.default.createElement(HighlightBar, { size: size, style: { left: highlightStyle.left, width: highlightStyle.width } },
+const hooks_1 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
+function TabList({ childrenArray, size, activeTab, onTabChange, }) {
+    const tabsContainerRef = (0, react_1.useRef)(null);
+    const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } = (0, hooks_1.useTabs)({
+        activeTab,
+        onTabChange,
+        containerRef: tabsContainerRef,
+        totalTabs: childrenArray.length,
+    });
+    const { highlightStyle } = useHighlightBarAnimation({
+        activeTab,
+        childrenArray,
+        overflowTabs,
+        tabsContainerRef,
+        visibleTabs,
+    });
+    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef },
+        react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
             if (!visibleTabs.includes(index))
                 return null;
             const { label, icon } = child.props;
-            const tabId = getTabId(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => {
-                    setTabRef(el, index);
-                    if (el) {
-                        el.setAttribute('data-label', label);
-                        el.setAttribute('data-animating', isAnimating.toString());
-                    }
-                }, onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
+            const tabId = (0, utils_1.getTabId)(label, index);
+            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
                     var _a, _b;
                     (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                     onTabClick(label);
@@ -61,7 +68,7 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                     : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
                 const { label } = childrenArray[index].props;
-                const tabId = getTabId(label, index);
+                const tabId = (0, utils_1.getTabId)(label, index);
                 return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
                         var _a, _b;
                         (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -69,6 +76,46 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                     }, disabled: childrenArray[index].props.disable }, label));
             })))))));
 }
+const useHighlightBarAnimation = (props) => {
+    const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
+    const [highlightStyle, setHighlightStyle] = react_1.default.useState({
+        left: 0,
+        width: 0,
+    });
+    (0, react_1.useEffect)(() => {
+        const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
+        const container = tabsContainerRef.current;
+        if (!container || activeIndex === -1) {
+            setHighlightStyle({ left: 0, width: 0 });
+            return;
+        }
+        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
+        if (!activeTabElement)
+            return;
+        container.querySelectorAll('[data-label]').forEach((el) => {
+            el.classList.remove('active');
+        });
+        const { offsetLeft, offsetWidth } = activeTabElement;
+        if (visibleTabs.includes(activeIndex)) {
+            activeTabElement.classList.add('active');
+            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+            return;
+        }
+        if (overflowTabs.includes(activeIndex)) {
+            const moreButton = container.querySelector('button');
+            if (!moreButton)
+                return;
+            const moreButtonRect = moreButton.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            setHighlightStyle({
+                left: moreButtonRect.left - containerRect.left,
+                width: moreButtonRect.width,
+            });
+            return;
+        }
+    }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
+    return { highlightStyle };
+};
 exports.TabListContainer = styled_components_1.default.ul `
   position: relative;
   display: flex;

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

@@ -12,12 +12,12 @@ export type TabItemProps = {
     icon?: React.ReactNode | string;
 };
 type TabsProps = {
+    id?: string;
     children: React.ReactElement<TabItemProps>[];
     className?: string;
     size: TabsSize;
-    forceReady?: boolean;
     initialTab?: string;
 };
-export declare function Tabs({ children, className, size, forceReady, initialTab: propInitialTab, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};