@carbon/react
Version:
React components for the Carbon Design System
104 lines (102 loc) • 3.39 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 { useControllableState } from "../../internal/useControllableState.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/SelectableTag.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 SelectableTag = forwardRef(({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, defaultSelected = false, ...other }, forwardRef) => {
const prefix = usePrefix();
const tagRef = useRef(null);
const generatedTagId = useId();
const tagId = id ?? `tag-${generatedTagId}`;
const [selectedTag, setSelectedTag] = useControllableState({
value: selected,
onChange,
defaultValue: defaultSelected
});
const tagClasses = classNames(`${prefix}--tag--selectable`, className, { [`${prefix}--tag--selectable-selected`]: selectedTag });
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);
const handleClick = (e) => {
setSelectedTag(!selectedTag);
onClick?.(e);
};
if (isEllipsisApplied) return /* @__PURE__ */ jsx(Tooltip, {
label: text,
align: "bottom",
className: tooltipClasses,
leaveDelayMs: 0,
onMouseEnter: () => false,
children: /* @__PURE__ */ jsx(Tag, {
"aria-pressed": selectedTag !== false,
ref: combinedRef,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
onClick: handleClick,
...other,
children: /* @__PURE__ */ jsx(Text, {
title: text,
className: `${prefix}--tag__label`,
children: text
})
})
});
return /* @__PURE__ */ jsx(Tag, {
"aria-pressed": selectedTag !== false,
ref: combinedRef,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
onClick: handleClick,
...other,
children: /* @__PURE__ */ jsx(Text, {
title: text,
className: `${prefix}--tag__label`,
children: text
})
});
});
SelectableTag.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
id: PropTypes.string,
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
onChange: PropTypes.func,
onClick: PropTypes.func,
selected: PropTypes.bool,
defaultSelected: PropTypes.bool,
size: PropTypes.oneOf(Object.keys(SIZES)),
text: PropTypes.string
};
//#endregion
export { SelectableTag as default };