@carbon/react
Version:
React components for the Carbon Design System
102 lines (100 loc) • 3.05 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { Text } from "../Text/Text.js";
import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
import { useId } from "../../internal/useId.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import { mergeRefs } from "../../tools/mergeRefs.js";
import { isEllipsisActive } from "./isEllipsisActive.js";
import Tag, { SIZES } from "./Tag.js";
import classNames from "classnames";
import { forwardRef, useRef, useState } from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
//#region src/components/Tag/OperationalTag.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const TYPES = {
red: "Red",
magenta: "Magenta",
purple: "Purple",
blue: "Blue",
cyan: "Cyan",
teal: "Teal",
green: "Green",
gray: "Gray",
"cool-gray": "Cool-Gray",
"warm-gray": "Warm-Gray"
};
const OperationalTag = forwardRef(({ className, disabled, id, renderIcon, size, text, type = "gray", ...other }, forwardRef) => {
const prefix = usePrefix();
const tagRef = useRef(null);
const generatedTagId = useId();
const tagId = id ?? `tag-${generatedTagId}`;
const tagClasses = classNames(`${prefix}--tag--operational`, className);
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
useIsomorphicEffect(() => {
const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
setIsEllipsisApplied(isEllipsisActive(newElement));
}, [prefix, tagRef]);
const tooltipClasses = classNames(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
const combinedRef = mergeRefs(tagRef, forwardRef);
if (isEllipsisApplied) return /* @__PURE__ */ jsx(Tooltip, {
label: text,
align: "bottom",
className: tooltipClasses,
leaveDelayMs: 0,
onMouseEnter: () => false,
closeOnActivation: true,
children: /* @__PURE__ */ jsx(Tag, {
ref: combinedRef,
type,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
...other,
children: /* @__PURE__ */ jsx(Text, {
title: text,
className: `${prefix}--tag__label`,
children: text
})
})
});
return /* @__PURE__ */ jsx(Tag, {
ref: combinedRef,
type,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
...other,
children: /* @__PURE__ */ jsx(Text, {
title: text,
className: `${prefix}--tag__label`,
children: text
})
});
});
OperationalTag.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
id: PropTypes.string,
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
size: PropTypes.oneOf(Object.keys(SIZES)),
text: PropTypes.string,
type: PropTypes.oneOf(Object.keys(TYPES))
};
//#endregion
export { OperationalTag as default };