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

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabContent = exports.TabList = void 0;
exports.Tabs = Tabs;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
const hooks_1 = require("../../../core/hooks");
function Tabs({ children, className }) {
    var _a, _b;
    const childrenArray = react_1.default.Children.toArray(children);
    const initialTab = (_b = (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
    const { activeTab, setTabRef, onTabClick, handleKeyboard, getTabId } = (0, hooks_1.useTabs)({
        initialTab,
        totalTabs: childrenArray.length,
    });
    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className },
        react_1.default.createElement(exports.TabList, { role: "tablist" }, childrenArray.map((child, index) => {
            const { label, onClick } = child.props;
            const tabId = getTabId(label, index);
            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, isActive: activeTab === label, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
                    onTabClick(label);
                    onClick === null || onClick === void 0 ? void 0 : onClick();
                } }));
        })),
        childrenArray.map((child, index) => {
            const { label } = child.props;
            const tabId = 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;
        })));
}
const TabsContainer = styled_components_1.default.div `
  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.TabList = styled_components_1.default.ul `
  && {
    padding: var(--md-tabs-padding);
    margin-block-end: 0;
    border: var(--md-tabs-border);
    border-width: var(--md-tabs-border-width);
    margin: 0;

    & > li:first-child {
      margin-bottom: 0px;
    }

    li[class^='Tab__TabItem'] {
      margin: var(--md-tabs-tab-margin);
    }
  }
`;
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);
`;
//# sourceMappingURL=Tabs.js.map