@engie-group/fluid-design-system-react/lib/components/navigation/tab/NJNavigationTab.js

Fluid Design System React

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Root as Slot } 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 { extractChild, updateChild } from '../../../utils/slots.js';
import { isDefaultAction } from '../../../utils/typeHelpers.js';
import { Utils } from '../../../utils/util.js';
import { NJIcon } from '../../icon/NJIcon.js';

const rootClass = 'nj-navigation-tab';
function NJNavigationTab(props) {
    const { variant, children, selected, controls, expanded, className: hostClass, ...htmlAttributes } = props;
    const className = Utils.classNames(rootClass, {
        [`${rootClass}--${variant}`]: !!variant
    }, hostClass);
    let actionElement;
    if (isDefaultAction(props)) {
        const { ...actionHtmlAttributes } = props.action ?? {};
        const actionClassName = Utils.classNames(actionHtmlAttributes.className, `${rootClass}__action`);
        actionElement = (jsx("button", { ...actionHtmlAttributes, className: actionClassName, type: actionHtmlAttributes.type ?? 'button', children: jsx(ActionChild, { ...props }) }));
    }
    else {
        const child = extractChild(children);
        const shell = updateChild(children, jsx(ActionChild, { ...props, children: child }));
        actionElement = jsx(Slot, { className: `${rootClass}__action`, children: shell });
    }
    delete htmlAttributes.actionAsChild;
    delete htmlAttributes.customIcon;
    delete htmlAttributes.expandable;
    return (jsx("div", { ...htmlAttributes, className: className, "aria-selected": htmlAttributes['aria-selected'] ?? selected, role: htmlAttributes.role || 'tab', "aria-controls": htmlAttributes['aria-controls'] ?? controls, "aria-expanded": htmlAttributes['aria-expanded'] ?? expanded, children: actionElement }));
}
function ActionChild({ icon, customIcon, children, trailing, expandable }) {
    return (jsxs(Fragment, { children: [icon && !customIcon && jsx(NJIcon, { className: `${rootClass}__icon`, name: icon }), customIcon && jsx(Slot, { className: `${rootClass}__icon`, children: customIcon }), children && jsx("span", { className: `${rootClass}__content`, children: children }), trailing, expandable && jsx(NJIcon, { className: `${rootClass}__arrow`, name: "keyboard_arrow_down" })] }));
}

export { NJNavigationTab };