@redocly/theme/lib/markdoc/components/Tabs/Tabs.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
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 };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabContent = exports.TabsSize = void 0;
exports.Tabs = Tabs;
const react_1 = __importStar(require("react"));
const react_router_dom_1 = require("react-router-dom");
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../../core/hooks");
const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
const utils_1 = require("../../../core/utils");
var TabsSize;
(function (TabsSize) {
    TabsSize["SMALL"] = "small";
    TabsSize["MEDIUM"] = "medium";
})(TabsSize || (exports.TabsSize = TabsSize = {}));
function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }) {
    var _a, _b;
    const childrenArray = react_1.default.Children.toArray(children);
    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 labelsHash = childrenArray.map((c) => c.props.label).join('|');
    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, labelsHash: labelsHash, containerRef: containerRef, externalActiveTab: controlledActiveTab }));
}
function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, labelsHash, containerRef, externalActiveTab, }) {
    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
    (0, react_1.useEffect)(() => {
        if (externalActiveTab && externalActiveTab !== activeTab) {
            setActiveTab(externalActiveTab);
        }
    }, [externalActiveTab, activeTab, setActiveTab]);
    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef }),
        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);
  font-size: var(--md-tabs-container-font-size);
  font-family: var(--md-tabs-container-font-family);
  font-style: var(--md-tabs-container-font-style);
  font-weight: var(--md-tabs-container-font-weight);
  background-color: var(--md-tabs-container-bg-color);
  margin: var(--md-tabs-container-margin);
  padding: var(--md-tabs-container-padding);
  border: var(--md-tabs-container-border);

  ol[class^='Tabs__TabList'] {
    margin: 0;
    padding: 0;
  }
`;
exports.TabContent = styled_components_1.default.div `
  color: var(--md-tabs-content-text-color);
  font-size: var(--md-tabs-content-font-size);
  font-family: var(--md-tabs-content-font-family);
  font-style: var(--md-tabs-content-font-style);
  font-weight: var(--md-tabs-content-font-weight);
  background-color: var(--md-tabs-content-bg-color);
  margin: var(--md-tabs-content-margin);
  padding: var(--md-tabs-content-padding);
  border: var(--md-tabs-content-border);

  &:focus-visible {
    outline: none;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: -2px;
      right: -4px;
      bottom: -2px;
      left: -4px;
      border: 1px solid var(--button-border-color-focused);
      border-radius: 6px;
      pointer-events: none;
    }
  }
`;
//# sourceMappingURL=Tabs.js.map