@lunit/oui/dist/components/TabbedPanel/TabbedPanel.js

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Typography } from '@mui/material';
import TabContext from '@mui/lab/TabContext';
import { BaseTab, BaseTabMenu, BaseTabPanel } from './TabbedPanel.styled';
const TabbedPanel = ({ tabs, size = 'medium', buttonVariant = 'normal', activatedTab, TabPanelProps, TabProps, TabsProps, menuVariant, onActivatedTab, onTabChangeListener, }) => {
    const handleChange = (_, newValue) => {
        if (onTabChangeListener) {
            onTabChangeListener(newValue);
        }
        onActivatedTab(newValue);
    };
    // If prop is not explicitly set, use standard when there is only one tab
    // This means by default, it will left-align when there is only one tab.
    const menuVariantSetting = menuVariant || tabs.length < 2 ? 'standard' : 'fullWidth';
    return (_jsx(Box, { children: _jsxs(TabContext, { value: activatedTab, children: [_jsx(BaseTabMenu, { size: size, value: activatedTab, onChange: handleChange, variant: menuVariantSetting, buttonVariant: buttonVariant, slotProps: { indicator: { sx: { display: 'none' } } }, ...TabsProps, children: tabs.map((t) => (_jsx(BaseTab, { buttonVariant: buttonVariant, size: size, disabled: t.disabled, disableTouchRipple: true, disableRipple: true, label: _jsx(Typography, { variant: "body_sb1", children: t.value }), value: t.value, ...TabProps }, t.value))) }), tabs.map((t) => (_jsx(BaseTabPanel, { value: t.value, ...TabPanelProps, children: t.element }, t.value)))] }) }));
};
export default TabbedPanel;