@engie-group/fluid-design-system-react/lib/components/tabs/NJTabs.js

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { Utils } from '../../utils/util.js';
import { NJTabPanel } from './NJTabPanel.js';

const NJTabs = React__default.forwardRef(({ label, activeTab, onClickTabItem, density, children, className, ...props }, forwardedRef) => {
    // Get the first child's id as default if activeTab is not provided
    const childrenArray = React__default.Children.toArray(children);
    const defaultTab = childrenArray[0]?.props.id;
    const [currentTab, setCurrentTab] = React__default.useState(activeTab || defaultTab);
    const onClick = (id, label, e) => {
        if (label) {
            onClickTabItem?.(id, label, e);
        }
        setCurrentTab(id);
    };
    const onKeyDown = (e) => {
        const target = e.target;
        switch (e.key) {
            case 'ArrowRight':
                e.preventDefault();
                target.nextElementSibling?.focus();
                break;
            case 'ArrowLeft':
                e.preventDefault();
                target.previousElementSibling?.focus();
                break;
            case 'Enter':
                e.preventDefault();
                target.click();
                break;
        }
    };
    const tabComponents = React__default.Children.map(children, (child) => {
        return React__default.cloneElement(child, {
            onClick,
            ['aria-selected']: !!currentTab && child.props.id === currentTab,
            onKeyDown
        });
    });
    const tabsClassName = Utils.classNames('nj-tab', {
        [`nj-tab--${density}`]: density && density !== 'normal'
    }, className);
    return (jsxs("div", { ...props, className: tabsClassName, ref: forwardedRef, children: [jsx("div", { className: "nj-tab__items", role: "tablist", "aria-label": label, children: tabComponents }), jsx("div", { children: React__default.Children.map(tabComponents, (child, index) => {
                    const isActive = !!child.props['aria-selected'];
                    return isActive ? (jsx(NJTabPanel, { id: `${child.props['aria-controls']}`, "aria-labelledby": child.props.id, active: isActive, children: child.props.children }, index)) : null;
                }) })] }));
});
NJTabs.displayName = 'NJTabs';

export { NJTabs };