@engie-group/fluid-design-system-react/lib/components/avatarList/NJAvatarList.js

Fluid Design System React

import { jsx, jsxs } from 'react/jsx-runtime';
import React__default from 'react';
import { Utils } from '../../utils/util.js';
import { NJAvatarRoot } from '../avatar/root/NJAvatarRoot.js';
import '../avatar/badge/NJAvatarBadge.js';
import '../avatar/status/NJAvatarStatus.js';
import '../avatar/picture/NJAvatarPicture.js';
import { NJTooltip } from '../tooltip/NJTooltip.js';

const NJAvatarList = React__default.forwardRef(({ children, max = 4, density = 'default', scale, onClick, onMouseEnter, onMouseLeave, tooltipText, tooltipPosition = 'bottom', className, showMoreLabel, ...htmlProps }, ref) => {
    const avatarListClass = Utils.classNames('nj-avatar-list', {
        'nj-avatar-list--compact': density === 'compact',
        [`nj-avatar-list--${scale}`]: !!scale
    }, className);
    const remainingCount = children.length - max;
    const remainingCountLabel = typeof showMoreLabel === 'function' ? showMoreLabel(remainingCount) : showMoreLabel;
    const remainingCountAvatar = (jsx(NJAvatarRoot, { initials: `+ ${remainingCount}`, isClickable: !Utils.isUndefinedOrNull(onClick), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, isRemainingCount: true, label: remainingCountLabel }));
    const avatarsToDisplay = children.slice(0, max);
    return (jsxs("div", { ref: ref, className: avatarListClass, ...htmlProps, children: [avatarsToDisplay, children && children.length > max && tooltipText && (jsx(NJTooltip, { text: tooltipText, placement: tooltipPosition, children: remainingCountAvatar })), children && children.length > max && !tooltipText && remainingCountAvatar] }));
});
NJAvatarList.displayName = 'NJAvatarList';

export { NJAvatarList };