@carbon/react/lib/components/Tag/DismissibleTag.js

React components for the Carbon Design System

/**
 * 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');
var Text = require('../Text/Text.js');
require('../Text/TextDirection.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 useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');

var _Close;
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
const DismissibleTag = /*#__PURE__*/React.forwardRef(({
  className,
  decorator,
  disabled,
  id,
  renderIcon,
  title = 'Dismiss',
  onClose,
  slug,
  size,
  text,
  tagTitle,
  type,
  dismissTooltipAlignment = 'bottom',
  dismissTooltipLabel = 'Dismiss tag',
  ...other
}, forwardRef) => {
  const prefix = usePrefix.usePrefix();
  const tagLabelRef = React.useRef(null);
  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
  const tagId = id || `tag-${useId.useId()}`;
  const tagClasses = cx(`${prefix}--tag--filter`, className);
  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
  useIsomorphicEffect.default(() => {
    const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
  }, [prefix, tagLabelRef]);
  const combinedRef = mergeRefs.mergeRefs(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'
  }) : candidate;
  const tooltipClasses = cx(`${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.createElement(Tag.default, _rollupPluginBabelHelpers.extends({
    ref: combinedRef,
    type: type,
    size: size,
    renderIcon: renderIcon,
    disabled: disabled,
    className: tagClasses,
    id: tagId
  }, otherProps), /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--interactive--tag-children`
  }, /*#__PURE__*/React.createElement(Text.Text, {
    title: tagTitle ? tagTitle : text,
    className: `${prefix}--tag__label`
  }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--tag__decorator`
  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
    label: dismissActionLabel,
    align: dismissTooltipAlignment,
    className: tooltipClasses,
    leaveDelayMs: 0,
    closeOnActivation: true
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: `${prefix}--tag__close-icon`,
    onClick: handleClose,
    disabled: disabled,
    "aria-label": dismissActionLabel
  }, _Close || (_Close = /*#__PURE__*/React.createElement(iconsReact.Close, null))))));
});
DismissibleTag.propTypes = {
  /**
   * Provide a custom className that is applied to the containing <span>
   */
  className: PropTypes.string,
  /**
   * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
   */
  decorator: PropTypes.node,
  /**
   * Specify if the `DismissibleTag` is disabled
   */
  disabled: PropTypes.bool,
  /**
   * Specify the tooltip alignment for the dismiss button
   */
  dismissTooltipAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
  /**
   * Provide a custom tooltip label for the dismiss button
   */
  dismissTooltipLabel: PropTypes.string,
  /**
   * Specify the id for the tag.
   */
  id: PropTypes.string,
  /**
   * Click handler for filter tag close button.
   */
  onClose: PropTypes.func,
  /**
   * A component used to render an icon.
   */
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Specify the size of the Tag. Currently supports either `sm`,
   * `md` (default) or `lg` sizes.
   */
  size: PropTypes.oneOf(Object.keys(Tag.SIZES)),
  /**
   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
   */
  slug: deprecate.deprecate(PropTypes.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.string,
  /**
   * Provide a custom `title` to be inserted in the tag.
   */
  tagTitle: PropTypes.string,
  /**
   * Text to show on clear filters
   */
  title: PropTypes.string,
  /**
   * Specify the type of the `Tag`
   */
  type: PropTypes.oneOf(Object.keys(Tag.TYPES))
};

exports.default = DismissibleTag;