@engie-group/fluid-design-system-react/lib/components/tag/NJTag.js

Fluid Design System React

import { jsx, jsxs } 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 React__default from 'react';
import { isDefaultAction } from '../../utils/typeHelpers.js';
import { Utils } from '../../utils/util.js';
import { NJIcon } from '../icon/NJIcon.js';
import { NJIconButton } from '../icon-button/NJIconButton.js';

const NJTag = React__default.forwardRef(({ label, variant, isDisabled, scale = 'md', closeAriaLabel, onClose, isVisible = true, iconName, className, actionAsChild = false, children, ...htmlProps }, forwardedRef) => {
    let contentElement = null;
    if (!isDefaultAction({ actionAsChild })) {
        const child = React__default.Children.only(children);
        if (!React__default.isValidElement(child)) {
            throw new Error('NJTag: When using actionAsChild, a valid React element must be provided as a child.');
        }
        contentElement = jsx(Slot, { className: "nj-tag__action", children: child });
    }
    else {
        contentElement = jsx("p", { className: "nj-tag__text", children: label });
    }
    const tagClass = Utils.classNames('nj-tag', {
        [`nj-tag--${variant}`]: variant,
        [`nj-tag--${scale}`]: scale && scale !== 'md',
        ['nj-tag--disabled']: isDisabled
    }, className);
    return isVisible ? (jsxs("span", { ...htmlProps, ref: forwardedRef, className: tagClass, children: [contentElement, iconName && jsx(NJIcon, { name: iconName, className: "nj-tag__icon" }), onClose && !isDisabled && (jsx(NJIconButton, { icon: "close", className: "nj-tag__close", scale: "2xs", onClick: onClose, "aria-label": closeAriaLabel ?? '' }))] })) : null;
});
NJTag.displayName = 'NJTag';

export { NJTag };