@carbon/react
Version:
React components for the Carbon Design System
170 lines (161 loc) • 6.14 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
var useId = require('../../internal/useId.js');
var usePrefix = require('../../internal/usePrefix.js');
var deprecate = require('../../prop-types/deprecate.js');
var Tag = require('./Tag.js');
var iconsReact = require('@carbon/icons-react');
require('../Tooltip/DefinitionTooltip.js');
var Tooltip = require('../Tooltip/Tooltip.js');
require('../Text/index.js');
var isEllipsisActive = require('./isEllipsisActive.js');
var mergeRefs = require('../../tools/mergeRefs.js');
var index = require('../AILabel/index.js');
var utils = require('../../internal/utils.js');
var Text = require('../Text/Text.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var _Close;
const DismissibleTag = /*#__PURE__*/React.forwardRef(({
className,
decorator,
disabled,
id,
renderIcon,
title = 'Dismiss',
onClose,
slug,
size,
text,
tagTitle,
type,
dismissTooltipLabel = 'Dismiss tag',
...other
}, forwardRef) => {
const prefix = usePrefix.usePrefix();
const tagLabelRef = React.useRef(null);
const tagId = id || `tag-${useId.useId()}`;
const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
React.useLayoutEffect(() => {
const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
}, [prefix, tagLabelRef]);
const combinedRef = mergeRefs["default"](tagLabelRef, forwardRef);
const handleClose = event => {
if (onClose) {
event.stopPropagation();
onClose(event);
}
};
const candidate = slug ?? decorator;
const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
size: 'sm',
kind: 'inline'
}) : null;
const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
// Removing onClick from the spread operator
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {
onClick,
...otherProps
} = other;
const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
ref: combinedRef,
type: type,
size: size,
renderIcon: renderIcon,
disabled: disabled,
className: tagClasses,
id: tagId
}, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--interactive--tag-children`
}, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
title: tagTitle ? tagTitle : text,
className: `${prefix}--tag__label`
}, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--tag__decorator`
}, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
label: dismissActionLabel,
align: "bottom",
className: tooltipClasses,
leaveDelayMs: 0,
closeOnActivation: true
}, /*#__PURE__*/React__default["default"].createElement("button", {
type: "button",
className: `${prefix}--tag__close-icon`,
onClick: handleClose,
disabled: disabled,
"aria-label": dismissActionLabel
}, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))))));
});
DismissibleTag.propTypes = {
/**
* Provide a custom className that is applied to the containing <span>
*/
className: PropTypes__default["default"].string,
/**
* **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
*/
decorator: PropTypes__default["default"].node,
/**
* Specify if the `DismissibleTag` is disabled
*/
disabled: PropTypes__default["default"].bool,
/**
* Provide a custom tooltip label for the dismiss button
*/
dismissTooltipLabel: PropTypes__default["default"].string,
/**
* Specify the id for the tag.
*/
id: PropTypes__default["default"].string,
/**
* Click handler for filter tag close button.
*/
onClose: PropTypes__default["default"].func,
/**
* A component used to render an icon.
*/
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
/**
* Specify the size of the Tag. Currently supports either `sm`,
* `md` (default) or `lg` sizes.
*/
size: PropTypes__default["default"].oneOf(Object.keys(Tag.SIZES)),
/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
*/
slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
/**
* Provide text to be rendered inside of a the tag.
*/
text: PropTypes__default["default"].string,
/**
* Provide a custom `title` to be inserted in the tag.
*/
tagTitle: PropTypes__default["default"].string,
/**
* Text to show on clear filters
*/
title: PropTypes__default["default"].string,
/**
* Specify the type of the `Tag`
*/
type: PropTypes__default["default"].oneOf(Object.keys(Tag.TYPES))
};
exports["default"] = DismissibleTag;