@carbon/react
Version:
React components for the Carbon Design System
128 lines (126 loc) • 4.42 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 { deprecate } from "../../prop-types/deprecate.js";
import { isComponentElement } from "../../internal/utils.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import { AILabel } from "../AILabel/index.js";
import { mergeRefs } from "../../tools/mergeRefs.js";
import { isEllipsisActive } from "./isEllipsisActive.js";
import Tag, { SIZES, TYPES } from "./Tag.js";
import classNames from "classnames";
import { cloneElement, forwardRef, useRef, useState } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
import { Close } from "@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 = forwardRef(({ className, decorator, disabled, id, renderIcon, title = "Dismiss", onClose, slug, size, text, tagTitle, type, dismissTooltipAlignment = "bottom", dismissTooltipLabel = "Dismiss tag", ...other }, forwardRef) => {
const prefix = usePrefix();
const tagLabelRef = useRef(null);
const generatedTagId = useId();
const tagId = id ?? `tag-${generatedTagId}`;
const tagClasses = classNames(`${prefix}--tag--filter`, className);
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
useIsomorphicEffect(() => {
const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
setIsEllipsisApplied(isEllipsisActive(newElement));
}, [prefix, tagLabelRef]);
const combinedRef = mergeRefs(tagLabelRef, forwardRef);
const handleClose = (event) => {
if (onClose) {
event.stopPropagation();
onClose(event);
}
};
const candidate = slug ?? decorator;
const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, {
size: "sm",
kind: "inline"
}) : candidate;
const tooltipClasses = classNames(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
const { onClick, ...otherProps } = other;
const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
return /* @__PURE__ */ jsx(Tag, {
ref: combinedRef,
type,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
...otherProps,
children: /* @__PURE__ */ jsxs("div", {
className: `${prefix}--interactive--tag-children`,
children: [
/* @__PURE__ */ jsx(Text, {
title: tagTitle ? tagTitle : text,
className: `${prefix}--tag__label`,
children: text
}),
slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
className: `${prefix}--tag__decorator`,
children: normalizedDecorator
}) : "",
/* @__PURE__ */ jsx(Tooltip, {
label: dismissActionLabel,
align: dismissTooltipAlignment,
className: tooltipClasses,
leaveDelayMs: 0,
closeOnActivation: true,
children: /* @__PURE__ */ jsx("button", {
type: "button",
className: `${prefix}--tag__close-icon`,
onClick: handleClose,
disabled,
"aria-label": dismissActionLabel,
children: /* @__PURE__ */ jsx(Close, {})
})
})
]
})
});
});
DismissibleTag.propTypes = {
className: PropTypes.string,
decorator: PropTypes.node,
disabled: PropTypes.bool,
dismissTooltipAlignment: PropTypes.oneOf([
"top",
"bottom",
"left",
"right",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-end",
"left-start",
"right-end",
"right-start"
]),
dismissTooltipLabel: PropTypes.string,
id: PropTypes.string,
onClose: PropTypes.func,
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
size: PropTypes.oneOf(Object.keys(SIZES)),
slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
text: PropTypes.string,
tagTitle: PropTypes.string,
title: PropTypes.string,
type: PropTypes.oneOf(Object.keys(TYPES))
};
//#endregion
export { DismissibleTag as default };