@engie-group/fluid-design-system-react/lib/components/sidebar/item/NJSidebarItem.js

Fluid Design System React

import { jsx } from 'react/jsx-runtime';
import { forwardRef, Children, cloneElement } from 'react';
import { isDefaultComponent } from '../../../utils/typeHelpers.js';
import { NJListItem } from '../../list/item/NJListItem.js';
import '../../list/root/NJListRoot.js';
import { useSidebarContext } from '../NJSidebarContext.js';

const NJSidebarItem = forwardRef((props, forwardedRef) => {
    const { disabled, selected, leading, leadingIcon, trailing, children, asChild, ...htmlProps } = props;
    const { collapsed } = useSidebarContext();
    let content = collapsed ? undefined : children;
    if (isDefaultComponent(asChild)) {
        content = (jsx("button", { ref: forwardedRef, ...htmlProps, children: content }));
    }
    else {
        const child = Children.only(children);
        content = cloneElement(child, {
            children: collapsed ? undefined : child.props.children
        });
    }
    return (jsx(NJListItem, { role: "option", disabled: disabled, selected: selected, leading: leading, leadingIcon: leadingIcon, trailing: collapsed ? undefined : trailing, wrapperAsChild: true, children: content }));
});
NJSidebarItem.displayName = 'NJSidebarItem';

export { NJSidebarItem };