@redocly/theme/lib/core/hooks/use-tabs.js

Shared UI components lib

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTabs = useTabs;
const react_1 = require("react");
function useTabs({ initialTab, totalTabs }) {
    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
    const tabRefs = (0, react_1.useRef)([]);
    const setTabRef = (0, react_1.useCallback)((element, index) => {
        tabRefs.current[index] = element;
    }, []);
    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();
        }
    };
    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)((label) => {
        setActiveTab(label);
        const tabIndex = tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === label);
        focusTab(tabIndex);
    }, []);
    const handleKeyboard = (0, react_1.useCallback)((event, index) => {
        let newIndex = index;
        if (event.key === 'ArrowRight') {
            newIndex = (index + 1) % totalTabs;
        }
        else if (event.key === 'ArrowLeft') {
            newIndex = (index - 1 + totalTabs) % totalTabs;
        }
        else if (event.key === 'Home') {
            event.preventDefault();
            newIndex = 0;
        }
        else if (event.key === 'End') {
            event.preventDefault();
            newIndex = totalTabs - 1;
        }
        else {
            return;
        }
        onTabSelect(newIndex);
    }, [totalTabs, onTabSelect]);
    return { activeTab, setActiveTab, setTabRef, onTabClick, handleKeyboard, getTabId };
}
//# sourceMappingURL=use-tabs.js.map