@vectara/vectara-ui/lib/components/tabs/TabsNavigator.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { VuiPopover } from "../popover/Popover";
import { VuiTab } from "./Tab";
import { VuiTabs } from "./Tabs";
import { useVuiContext } from "../context/Context";
import { VuiIcon } from "../icon/Icon";
import { BiDotsVertical } from "react-icons/bi";
import { VuiFlexContainer } from "../flex/FlexContainer";
export const VuiTabsNavigator = (_a) => {
    var _b;
    var { routes, popover } = _a, rest = __rest(_a, ["routes", "popover"]);
    const { getPath } = useVuiContext();
    const [isOpen, setIsOpen] = useState(false);
    const isRouteActive = (route) => {
        var _a;
        return (_a = route.isActive) !== null && _a !== void 0 ? _a : (route.href ? getPath().includes(route.href) : false);
    };
    const activeRoute = routes.find((route) => isRouteActive(route));
    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("button", Object.assign({ className: "vuiTabsNavigatorButton" }, rest, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { children: (_b = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _b !== void 0 ? _b : "No selection" })] })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed", vertical: true }, { children: routes.map((route, index) => {
                const { href, onClick, title, testId, append } = route;
                return (_jsx(VuiTab, Object.assign({ href: href, isActive: isRouteActive(route), "data-testid": testId, onClick: () => {
                        onClick === null || onClick === void 0 ? void 0 : onClick();
                        setIsOpen(false);
                    } }, { children: _jsxs(VuiFlexContainer, Object.assign({ spacing: "s", alignItems: "center" }, { children: [title, append] })) }), index));
            }) })) })));
};