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

package/lib/markdoc/components/Tabs/TabList.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.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
@@ -34,47 +44,144 @@ const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuIte
 const Button_1 = require("../../../components/Button/Button");
 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)({
+/**
+ * Calculates optimal dropdown position relative to viewport to ensure visibility.
+ * Positions below the button by default, but moves above if insufficient space.
+ * Adjusts horizontal position to prevent overflow off screen edges.
+ */
+const calculateDropdownPosition = (buttonRect, dropdownRect) => {
+    const gap = 4;
+    const margin = 16;
+    const spaceBelow = window.innerHeight - buttonRect.bottom;
+    const spaceAbove = buttonRect.top;
+    // Position below button, or above if dropdown doesn't fit below
+    const top = spaceBelow < dropdownRect.height + gap && spaceAbove > spaceBelow
+        ? buttonRect.top - gap
+        : buttonRect.bottom + gap;
+    // Align with button left edge, adjust if overflows screen
+    const idealLeft = buttonRect.left;
+    const rightEdge = idealLeft + dropdownRect.width;
+    const overflowsRight = rightEdge > window.innerWidth - margin;
+    const left = overflowsRight
+        ? window.innerWidth - dropdownRect.width - margin
+        : Math.max(margin, idealLeft);
+    return { top, left };
+};
+/**
+ * Manages dropdown positioning and updates on scroll/resize events for TabList.
+ */
+const useDropdownPosition = (hasOverflow, dropdownRef) => {
+    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({});
+    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
+    const updateDropdownPosition = (0, react_1.useCallback)(() => {
+        if (!dropdownRef.current)
+            return;
+        const button = dropdownRef.current.querySelector('button');
+        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+        if (!button || !dropdownMenu)
+            return;
+        const buttonRect = button.getBoundingClientRect();
+        const dropdownRect = dropdownMenu.getBoundingClientRect();
+        const position = calculateDropdownPosition(buttonRect, dropdownRect);
+        setDropdownPosition(position);
+    }, [dropdownRef]);
+    // Track when dropdown menu appears and recalculate position
+    (0, react_1.useEffect)(() => {
+        if (!hasOverflow || !isDropdownOpen || !dropdownRef.current)
+            return;
+        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+        if (!dropdownMenu)
+            return;
+        // ResizeObserver tracks both initial render and size changes
+        const resizeObserver = new ResizeObserver(() => {
+            updateDropdownPosition();
+        });
+        resizeObserver.observe(dropdownMenu);
+        return () => resizeObserver.disconnect();
+    }, [hasOverflow, isDropdownOpen, dropdownRef, updateDropdownPosition]);
+    // Update position on scroll/resize
+    (0, react_1.useEffect)(() => {
+        if (!hasOverflow || !isDropdownOpen)
+            return;
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        window.addEventListener('resize', updateDropdownPosition);
+        return () => {
+            window.removeEventListener('scroll', updateDropdownPosition, true);
+            window.removeEventListener('resize', updateDropdownPosition);
+        };
+    }, [hasOverflow, isDropdownOpen, updateDropdownPosition]);
+    return {
+        dropdownPosition,
+        isDropdownOpen,
+        setIsDropdownOpen,
+        setDropdownPosition,
+        updateDropdownPosition,
+    };
+};
+const renderTab = (child, index, size, setTabRef, handleKeyboard, onTabClick) => {
+    const { label, icon } = child.props;
+    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);
+        } }));
+};
+function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }) {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const totalTabs = childrenArray.length;
+    const { overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef, isReady } = (0, hooks_1.useTabs)({
         activeTab,
         onTabChange,
-        containerRef: tabsContainerRef,
-        totalTabs: childrenArray.length,
+        containerRef,
+        totalTabs,
     });
+    (0, react_1.useEffect)(() => {
+        onReadyChange === null || onReadyChange === void 0 ? void 0 : onReadyChange(isReady);
+    }, [isReady, onReadyChange]);
     const { highlightStyle } = useHighlightBarAnimation({
         activeTab,
         childrenArray,
         overflowTabs,
-        tabsContainerRef,
+        tabsContainerRef: containerRef,
         visibleTabs,
     });
-    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef },
+    const hasOverflow = overflowTabs.length > 0;
+    const isMoreActive = hasOverflow &&
+        overflowTabs.some((i) => childrenArray[i] && activeTab === childrenArray[i].props.label);
+    // Show as selector when no visible tabs (all tabs in dropdown)
+    const showAsSelector = visibleTabs.length === 0 && hasOverflow;
+    const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(hasOverflow, dropdownRef);
+    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: containerRef },
         react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
-            if (!visibleTabs.includes(index))
+            // Show all tabs before ready (for measurement), then only visible ones
+            const shouldRender = !isReady || visibleTabs.includes(index);
+            if (!shouldRender)
                 return null;
-            const { label, icon } = child.props;
-            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);
-                } }));
+            return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
-        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                    ? 'active'
-                    : 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 = (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);
-                        onTabClick(index);
-                    }, disabled: childrenArray[index].props.disable }, label));
-            })))))));
+        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
+            react_1.default.createElement(DropdownWrapper, { "$top": dropdownPosition.top, "$left": dropdownPosition.left, onClickCapture: () => {
+                    setIsDropdownOpen(true);
+                } },
+                react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {
+                        setIsDropdownOpen(false);
+                        setDropdownPosition({});
+                    } },
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
+                        const child = childrenArray[index];
+                        if (!child)
+                            return null;
+                        const { label } = child.props;
+                        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 = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                onTabClick(index);
+                            }, disabled: child.props.disable }, label));
+                    }))))))));
 }
 const useHighlightBarAnimation = (props) => {
     const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
@@ -89,18 +196,11 @@ const useHighlightBarAnimation = (props) => {
             setHighlightStyle({ left: 0, width: 0 });
             return;
         }
-        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
-        if (!activeTabElement)
-            return;
+        // Remove active class from all tabs first
         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;
-        }
+        // Check if active tab is in overflow first
         if (overflowTabs.includes(activeIndex)) {
             const moreButton = container.querySelector('button');
             if (!moreButton)
@@ -113,6 +213,16 @@ const useHighlightBarAnimation = (props) => {
             });
             return;
         }
+        // Active tab is visible, find its element
+        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
+        if (!activeTabElement)
+            return;
+        const { offsetLeft, offsetWidth } = activeTabElement;
+        if (visibleTabs.includes(activeIndex)) {
+            activeTabElement.classList.add('active');
+            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+            return;
+        }
     }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
     return { highlightStyle };
 };
@@ -122,15 +232,11 @@ exports.TabListContainer = styled_components_1.default.ul `
   gap: var(--md-tabs-gap);
   width: 100%;
   min-width: 0;
-  position: relative;
 
   &::before {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    inset: 0;
     border: var(--md-tabs-border);
     border-width: var(--md-tabs-border-width);
     pointer-events: none;
@@ -138,11 +244,17 @@ exports.TabListContainer = styled_components_1.default.ul `
 
   && {
     padding: var(--md-tabs-padding);
-    margin-block-end: 0;
     margin: 0;
 
     & > li {
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      flex-shrink: 0;
+
+      &.dropdown-tab {
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+      }
     }
   }
 `;
@@ -152,7 +264,7 @@ exports.TabItem = styled_components_1.default.li `
   cursor: pointer;
   align-items: center;
   padding: var(--md-tabs-tab-wrapper-padding);
-  z-index: 1;
+  z-index: var(--z-index-surface);
 
   ${({ active, size }) => active
     ? (0, styled_components_1.css) `
@@ -189,6 +301,46 @@ exports.TabItem = styled_components_1.default.li `
     }
   }
 `;
+const DropdownWrapper = styled_components_1.default.div.attrs((props) => ({
+    style: Object.assign(Object.assign({}, (props.$top !== undefined && { '--dropdown-top': `${props.$top}px` })), (props.$left !== undefined && { '--dropdown-left': `${props.$left}px` })),
+})) `
+  position: static;
+  z-index: var(--z-index-raised);
+  width: 100%;
+  min-width: 0;
+`;
+const FixedPositionDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  position: static;
+  width: 100%;
+  min-width: 0;
+
+  > div:first-child {
+    width: 100%;
+    min-width: 0;
+  }
+
+  > div:last-child {
+    position: fixed;
+    top: var(--dropdown-top, 0);
+    left: var(--dropdown-left, 0);
+    right: auto;
+    bottom: auto;
+    transform: none;
+    padding-top: 0;
+    max-width: min(400px, calc(100vw - 32px));
+    max-height: calc(100vh - var(--dropdown-top, 0) - 32px);
+    overflow-y: auto;
+    z-index: var(--z-index-raised);
+
+    ul {
+      li {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+`;
 const HighlightBar = styled_components_1.default.div `
   position: absolute;
   top: 0;
@@ -208,11 +360,19 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
+const TabButtonText = styled_components_1.default.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+`;
 exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
+  width: 100%;
 
   transition:
     background-color 300ms ease-in-out,
@@ -231,9 +391,9 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
 
   &.active {
     color: var(--md-tabs-active-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-family: var(--md-tabs-active-tab-font-family);
     font-style: var(--md-tabs-active-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-active-tab-font-weight);
     line-height: var(--md-tabs-${({ size }) => size}-active-tab-line-height);
     background-color: var(--md-tabs-active-tab-bg-color);
@@ -243,12 +403,12 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
 
   &:hover {
     color: var(--md-tabs-hover-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-family: var(--md-tabs-hover-tab-font-family);
     font-style: var(--md-tabs-hover-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-hover-tab-font-weight);
-    background-color: var(--md-tabs-hover-tab-bg-color);
     line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
+    background-color: var(--md-tabs-hover-tab-bg-color);
     border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
     padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
   }

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

@@ -17,7 +17,8 @@ type TabsProps = {
     className?: string;
     size: TabsSize;
     initialTab?: string;
+    forceReady?: boolean;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -15,21 +15,29 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -38,22 +46,62 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
     var _a, _b;
-    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const childrenArray = react_1.default.Children.toArray(children);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
-    (0, react_1.useEffect)(() => {
-        setChildrenArray(react_1.default.Children.toArray(children));
-    }, [children]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
+    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+    const handleReadyChange = (0, react_1.useCallback)((ready) => {
+        setIsReady(ready);
+    }, []);
+    // Reset isReady when children change (new page/tabs)
+    // Use useLayoutEffect to run synchronously before paint
+    (0, react_1.useLayoutEffect)(() => {
+        setIsReady(false);
+    }, [labelsHash]);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
+}
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
+    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
+    (0, react_1.useEffect)(() => {
+        const availableLabels = childrenArray.map((child) => child.props.label);
+        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+            setActiveTab(initialTab);
+        }
+    }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -70,6 +118,13 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) => !$isReady &&
+    (0, styled_components_1.css) `
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

package/lib/markdoc/default.d.ts

@@ -4,8 +4,111 @@ export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
+import { admonition } from '../markdoc/tags/admonition';
+import { html } from '../markdoc/tags/html';
+import { markdocExample } from '../markdoc/tags/markdoc-example';
+import { partial } from '../markdoc/tags/partial';
+import { tab } from '../markdoc/tags/tab';
+import { tabs } from '../markdoc/tags/tabs';
+import { debug } from '../markdoc/tags/debug';
+import { codeSnippet } from '../markdoc/tags/code-snippet';
+import { inlineSvg } from '../markdoc/tags/inline-svg';
+import { cards } from '../markdoc/tags/cards';
+import { card } from '../markdoc/tags/card';
+import { img } from '../markdoc/tags/img';
+import { codeWalkthrough } from '../markdoc/tags/code-walkthrough';
+import { codeStep } from '../markdoc/tags/code-step';
+import { input } from '../markdoc/tags/input';
+import { toggle } from '../markdoc/tags/code-toggle';
+import { codeGroup } from '../markdoc/tags/code-group';
+import { icon } from '../markdoc/tags/icon';
 export declare const tags: {
-    [x: string]: import("@markdoc/markdoc").Schema & {
+    [admonition.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [debug.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [html.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [markdocExample.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [partial.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [tab.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [tabs.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeSnippet.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [inlineSvg.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [cards.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [card.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [img.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeWalkthrough.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeStep.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [toggle.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [input.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeGroup.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [icon.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
             resolver?: string;
         }>;

package/lib/markdoc/default.js

@@ -18,13 +18,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-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.tags = exports.components = void 0;
 /* Attributes */