@engie-group/fluid-design-system-react/lib/components/list/item/NJListItem.js

Fluid Design System React

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useMergeRefs } from '../../../node_modules/.pnpm/@floating-ui_react@0.27.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.js';
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 React__default, { useRef, useId } from 'react';
import { useInert } from '../../../utils/hook.js';
import { Utils } from '../../../utils/util.js';
import { NJIcon } from '../../icon/NJIcon.js';

const rootClass = 'nj-list__item';
const NJListItem = React__default.forwardRef((props, forwardedRef) => {
    const { children, interactive, disabled, selected, textDistribution, virtuallyFocused, wrapperAsChild, leading: baseLeading, leadingIcon, trailing: baseTrailing, trailingIcon, secondaryText, id: htmlId, className: hostClass, ...htmlProps } = props;
    const liRef = useRef(null);
    useInert(liRef, disabled);
    const className = Utils.classNames(rootClass, {
        [`${rootClass}--disabled`]: disabled,
        [`${rootClass}--focused`]: virtuallyFocused,
        [`${rootClass}--vertical`]: textDistribution === 'vertical',
        [`${rootClass}--interactive`]: interactive
    }, hostClass);
    const contentWrapperClasses = `${rootClass}-wrapper`;
    const ref = useMergeRefs([forwardedRef, liRef]);
    const id = htmlId ?? useId();
    const leading = baseLeading ? (jsx(Slot, { className: `${rootClass}-leading`, children: baseLeading }, `${id}-leading`)) : (leadingIcon && (jsx(NJIcon, { className: `${rootClass}-leading`, name: leadingIcon }, `${id}-leading`)));
    const trailing = baseTrailing ? (jsx(Slot, { className: `${rootClass}-trailing`, children: baseTrailing }, `${id}-trailing`)) : (trailingIcon && (jsx(NJIcon, { className: `${rootClass}-trailing`, name: trailingIcon }, `${id}-trailing`)));
    const wrapperFactory = (primary) => {
        const PrimaryElement = React__default.isValidElement(primary) ? Slot : 'span';
        return (jsxs(Fragment, { children: [leading, (primary || secondaryText) && (jsxs("span", { className: `${rootClass}-content`, children: [jsx(PrimaryElement, { className: `${rootClass}-primary`, children: primary }), secondaryText && jsx("span", { className: `${rootClass}-secondary`, children: secondaryText })] }, `${id}-primary`)), trailing] }));
    };
    let wrapper = children && wrapperFactory(children);
    if (wrapperAsChild) {
        const child = React__default.Children.only(children);
        if (React__default.isValidElement(child)) {
            const typedChild = child;
            wrapper = React__default.cloneElement(typedChild, {
                children: typedChild.props.children && wrapperFactory(typedChild.props.children)
            });
        }
    }
    return (jsx("li", { ref: ref, "aria-selected": selected, role: selected ? 'option' : undefined, "aria-disabled": disabled ? true : undefined, tabIndex: interactive && !disabled ? 0 : undefined, ...htmlProps, id: id, className: className, children: wrapperAsChild ? jsx(Slot, { className: contentWrapperClasses, children: wrapper }) : wrapper }));
});
NJListItem.displayName = 'NJListItem';

export { NJListItem };