@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 (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;
};
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 = __importStar(require("styled-components"));
const hooks_1 = require("../../../core/hooks");
const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
var TabsSize;
(function (TabsSize) {
    TabsSize["SMALL"] = "small";
    TabsSize["MEDIUM"] = "medium";
})(TabsSize || (exports.TabsSize = TabsSize = {}));
function Tabs({ children, className, size }) {
    var _a, _b;
    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
    (0, react_1.useEffect)(() => {
        setChildrenArray(react_1.default.Children.toArray(children));
    }, [children]);
    const tabsContainerRef = (0, react_1.useRef)(null);
    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
    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, visibleTabs, overflowTabs, ready, allTabsHidden, } = (0, hooks_1.useTabs)({
        initialTab,
        totalTabs: childrenArray.length,
        containerRef: tabsContainerRef,
    });
    const [prevTab, setPrevTab] = react_1.default.useState(initialTab);
    const [highlightStyle, setHighlightStyle] = react_1.default.useState({
        left: 0,
        width: 0,
    });
    (0, react_1.useEffect)(() => {
        setPrevTab(activeTab);
        setIsAnimating(true);
        const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
        const container = tabsContainerRef.current;
        if (container) {
            container.querySelectorAll('[data-label]').forEach((el) => {
                el.classList.remove('active');
            });
            container.getBoundingClientRect();
            requestAnimationFrame(() => {
                if (activeIndex >= 0) {
                    let activeTabElement = null;
                    let startPosition = { left: 0, width: 0 };
                    if (visibleTabs.includes(activeIndex)) {
                        activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
                    }
                    else if (overflowTabs.includes(activeIndex)) {
                        const moreButton = container.querySelector('button');
                        if (moreButton) {
                            const moreButtonRect = moreButton.getBoundingClientRect();
                            const containerRect = container.getBoundingClientRect();
                            startPosition = {
                                left: moreButtonRect.left - containerRect.left,
                                width: moreButtonRect.width,
                            };
                        }
                    }
                    if (activeTabElement) {
                        const { offsetLeft, offsetWidth } = activeTabElement;
                        if (overflowTabs.includes(activeIndex)) {
                            setHighlightStyle(startPosition);
                            requestAnimationFrame(() => {
                                setHighlightStyle({ left: offsetLeft, width: offsetWidth });
                            });
                        }
                        else {
                            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
                        }
                        if (visibleTabs.includes(activeIndex)) {
                            activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
                        }
                        return () => {
                            container.querySelectorAll('[data-label]').forEach((el) => {
                                el.classList.remove('active');
                            });
                        };
                    }
                }
                setHighlightStyle({ left: 0, width: 0 });
                setIsAnimating(false);
            });
        }
        else {
            setHighlightStyle({ left: 0, width: 0 });
            setIsAnimating(false);
        }
    }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready },
        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, overflowTabs: overflowTabs, setTabRef: setTabRef, onTabClick: onTabClick, handleKeyboard: handleKeyboard, getTabId: getTabId, activeTab: activeTab, isAnimating: isAnimating, highlightStyle: highlightStyle, visibleTabs: visibleTabs, allTabsHidden: allTabsHidden, tabsContainerRef: tabsContainerRef }),
        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 `
  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);

  ${({ isReady }) => !isReady
    ? (0, styled_components_1.css) `
          visibility: hidden;
          overflow: hidden;
        `
    : (0, styled_components_1.css) `
          visibility: visible;
          overflow: visible;
        `}

  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