@carbon/react/lib/components/Tag/DismissibleTag.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_deprecate = require("../../prop-types/deprecate.js");
const require_utils = require("../../internal/utils.js");
const require_Tooltip = require("../Tooltip/Tooltip.js");
const require_index = require("../AILabel/index.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");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/Tag/DismissibleTag.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 DismissibleTag = (0, react.forwardRef)(({ className, decorator, disabled, id, renderIcon, title = "Dismiss", onClose, slug, size, text, tagTitle, type, dismissTooltipAlignment = "bottom", dismissTooltipLabel = "Dismiss tag", ...other }, forwardRef) => {
	const prefix = require_usePrefix.usePrefix();
	const tagLabelRef = (0, react.useRef)(null);
	const generatedTagId = require_useId.useId();
	const tagId = id ?? `tag-${generatedTagId}`;
	const tagClasses = (0, classnames.default)(`${prefix}--tag--filter`, className);
	const [isEllipsisApplied, setIsEllipsisApplied] = (0, react.useState)(false);
	require_useIsomorphicEffect.default(() => {
		const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
		setIsEllipsisApplied(require_isEllipsisActive.isEllipsisActive(newElement));
	}, [prefix, tagLabelRef]);
	const combinedRef = require_mergeRefs.mergeRefs(tagLabelRef, forwardRef);
	const handleClose = (event) => {
		if (onClose) {
			event.stopPropagation();
			onClose(event);
		}
	};
	const candidate = slug ?? decorator;
	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index.AILabel) ? (0, react.cloneElement)(candidate, {
		size: "sm",
		kind: "inline"
	}) : candidate;
	const tooltipClasses = (0, classnames.default)(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
	const { onClick, ...otherProps } = other;
	const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tag.default, {
		ref: combinedRef,
		type,
		size,
		renderIcon,
		disabled,
		className: tagClasses,
		id: tagId,
		...otherProps,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: `${prefix}--interactive--tag-children`,
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
					title: tagTitle ? tagTitle : text,
					className: `${prefix}--tag__label`,
					children: text
				}),
				slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: `${prefix}--tag__decorator`,
					children: normalizedDecorator
				}) : "",
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
					label: dismissActionLabel,
					align: dismissTooltipAlignment,
					className: tooltipClasses,
					leaveDelayMs: 0,
					closeOnActivation: true,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
						type: "button",
						className: `${prefix}--tag__close-icon`,
						onClick: handleClose,
						disabled,
						"aria-label": dismissActionLabel,
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Close, {})
					})
				})
			]
		})
	});
});
DismissibleTag.propTypes = {
	className: prop_types.default.string,
	decorator: prop_types.default.node,
	disabled: prop_types.default.bool,
	dismissTooltipAlignment: prop_types.default.oneOf([
		"top",
		"bottom",
		"left",
		"right",
		"top-start",
		"top-end",
		"bottom-start",
		"bottom-end",
		"left-end",
		"left-start",
		"right-end",
		"right-start"
	]),
	dismissTooltipLabel: prop_types.default.string,
	id: prop_types.default.string,
	onClose: prop_types.default.func,
	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
	size: prop_types.default.oneOf(Object.keys(require_Tag.SIZES)),
	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
	text: prop_types.default.string,
	tagTitle: prop_types.default.string,
	title: prop_types.default.string,
	type: prop_types.default.oneOf(Object.keys(require_Tag.TYPES))
};
//#endregion
exports.default = DismissibleTag;