@carbon/react
Version:
React components for the Carbon Design System
108 lines (106 loc) • 4.16 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.
*/
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_useControllableState = require("../../internal/useControllableState.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/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 = (0, react.forwardRef)(({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, defaultSelected = false, ...other }, forwardRef) => {
const prefix = require_usePrefix.usePrefix();
const tagRef = (0, react.useRef)(null);
const generatedTagId = require_useId.useId();
const tagId = id ?? `tag-${generatedTagId}`;
const [selectedTag, setSelectedTag] = require_useControllableState.useControllableState({
value: selected,
onChange,
defaultValue: defaultSelected
});
const tagClasses = (0, classnames.default)(`${prefix}--tag--selectable`, className, { [`${prefix}--tag--selectable-selected`]: selectedTag });
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);
const handleClick = (e) => {
setSelectedTag(!selectedTag);
onClick?.(e);
};
if (isEllipsisApplied) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
label: text,
align: "bottom",
className: tooltipClasses,
leaveDelayMs: 0,
onMouseEnter: () => false,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tag.default, {
"aria-pressed": selectedTag !== false,
ref: combinedRef,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
onClick: handleClick,
...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, {
"aria-pressed": selectedTag !== false,
ref: combinedRef,
size,
renderIcon,
disabled,
className: tagClasses,
id: tagId,
onClick: handleClick,
...other,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
title: text,
className: `${prefix}--tag__label`,
children: text
})
});
});
SelectableTag.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]),
onChange: prop_types.default.func,
onClick: prop_types.default.func,
selected: prop_types.default.bool,
defaultSelected: prop_types.default.bool,
size: prop_types.default.oneOf(Object.keys(require_Tag.SIZES)),
text: prop_types.default.string
};
//#endregion
exports.default = SelectableTag;