@carbon/react/lib/components/Tag/OperationalTag.js

React components for the Carbon Design System

/**
 * 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 require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
const require_useId = require("../../internal/useId.js");
const require_Tooltip = require("../Tooltip/Tooltip.js");
const require_mergeRefs = require("../../tools/mergeRefs.js");
const require_isEllipsisActive = require("./isEllipsisActive.js");
const require_Tag = require("./Tag.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("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 = (0, react.forwardRef)(({ className, disabled, id, renderIcon, size, text, type = "gray", ...other }, forwardRef) => {
	const prefix = require_usePrefix.usePrefix();
	const tagRef = (0, react.useRef)(null);
	const generatedTagId = require_useId.useId();
	const tagId = id ?? `tag-${generatedTagId}`;
	const tagClasses = (0, classnames.default)(`${prefix}--tag--operational`, className);
	const [isEllipsisApplied, setIsEllipsisApplied] = (0, react.useState)(false);
	require_useIsomorphicEffect.default(() => {
		const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
		setIsEllipsisApplied(require_isEllipsisActive.isEllipsisActive(newElement));
	}, [prefix, tagRef]);
	const tooltipClasses = (0, classnames.default)(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
	const combinedRef = require_mergeRefs.mergeRefs(tagRef, forwardRef);
	if (isEllipsisApplied) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
		label: text,
		align: "bottom",
		className: tooltipClasses,
		leaveDelayMs: 0,
		onMouseEnter: () => false,
		closeOnActivation: true,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tag.default, {
			ref: combinedRef,
			type,
			size,
			renderIcon,
			disabled,
			className: tagClasses,
			id: tagId,
			...other,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
				title: text,
				className: `${prefix}--tag__label`,
				children: text
			})
		})
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tag.default, {
		ref: combinedRef,
		type,
		size,
		renderIcon,
		disabled,
		className: tagClasses,
		id: tagId,
		...other,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
			title: text,
			className: `${prefix}--tag__label`,
			children: text
		})
	});
});
OperationalTag.propTypes = {
	className: prop_types.default.string,
	disabled: prop_types.default.bool,
	id: prop_types.default.string,
	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
	size: prop_types.default.oneOf(Object.keys(require_Tag.SIZES)),
	text: prop_types.default.string,
	type: prop_types.default.oneOf(Object.keys(TYPES))
};
//#endregion
exports.default = OperationalTag;