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

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import { Root as Slot, Slottable } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
import { forwardRef, Children, cloneElement } from 'react';
import { isDefaultComponent } from '../../utils/typeHelpers.js';
import { Utils } from '../../utils/util.js';
import { NJBadge } from '../badge/NJBadge.js';

const NJTab = forwardRef((props, ref) => {
    const { id, label, onClick, badgeOptions, asChild, children, isActive, ...htmlProps } = props;
    let tabClass = 'nj-tab__item';
    if (isDefaultComponent(asChild)) {
        tabClass = Utils.classNames(tabClass, {
            ['nj-tab__item--active']: htmlProps['aria-selected'] || isActive
        }, htmlProps.className);
        return (jsxs("button", { ref: ref, role: "tab", tabIndex: htmlProps['aria-selected'] || isActive ? 0 : -1, ...htmlProps, id: id, className: tabClass, onClick: (e) => onClick?.(id, label, e), children: [label, badgeOptions && jsx(NJBadge, { ...badgeOptions })] }));
    }
    tabClass = Utils.classNames(tabClass, {
        ['nj-tab__item--active']: isActive
    });
    const onlyChild = Children.only(children);
    const child = cloneElement(onlyChild, {
        children: onlyChild.props.children || label
    });
    return (jsxs(Slot, { className: tabClass, id: id, children: [jsx(Slottable, { children: child }), badgeOptions && jsx(NJBadge, { ...badgeOptions })] }));
});
NJTab.displayName = 'NJTab';

export { NJTab };