@carbon/react/lib/components/Tag/SelectableTag.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 Tag = require('./Tag.js');
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 useControllableState = require('../../internal/useControllableState.js');
var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');

// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
const SelectableTag = /*#__PURE__*/React.forwardRef(({
  className,
  disabled,
  id,
  renderIcon,
  onChange,
  onClick,
  selected,
  size,
  text,
  defaultSelected = false,
  ...other
}, forwardRef) => {
  const prefix = usePrefix.usePrefix();
  const tagRef = 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 [selectedTag, setSelectedTag] = useControllableState.useControllableState({
    value: selected,
    onChange: onChange,
    defaultValue: defaultSelected
  });
  const tagClasses = cx(`${prefix}--tag--selectable`, className, {
    [`${prefix}--tag--selectable-selected`]: selectedTag
  });
  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
  useIsomorphicEffect.default(() => {
    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
  }, [prefix, tagRef]);
  const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
  const combinedRef = mergeRefs.mergeRefs(tagRef, forwardRef);
  const handleClick = e => {
    setSelectedTag(!selectedTag);
    onClick?.(e);
  };
  if (isEllipsisApplied) {
    return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
      label: text,
      align: "bottom",
      className: tooltipClasses,
      leaveDelayMs: 0,
      onMouseEnter: () => false
    }, /*#__PURE__*/React.createElement(Tag.default, _rollupPluginBabelHelpers.extends({
      "aria-pressed": selectedTag !== false,
      ref: combinedRef,
      size: size,
      renderIcon: renderIcon,
      disabled: disabled,
      className: tagClasses,
      id: tagId,
      onClick: handleClick
    }, other), /*#__PURE__*/React.createElement(Text.Text, {
      title: text,
      className: `${prefix}--tag__label`
    }, text)));
  }
  return /*#__PURE__*/React.createElement(Tag.default, _rollupPluginBabelHelpers.extends({
    "aria-pressed": selectedTag !== false,
    ref: combinedRef,
    size: size,
    renderIcon: renderIcon,
    disabled: disabled,
    className: tagClasses,
    id: tagId,
    onClick: handleClick
  }, other), /*#__PURE__*/React.createElement(Text.Text, {
    title: text,
    className: `${prefix}--tag__label`
  }, text));
});
SelectableTag.propTypes = {
  /**
   * Provide a custom className that is applied to the containing <span>
   */
  className: PropTypes.string,
  /**
   * Specify if the `SelectableTag` is disabled
   */
  disabled: PropTypes.bool,
  /**
   * Specify the id for the tag.
   */
  id: PropTypes.string,
  /**
   * A component used to render an icon.
   */
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Provide an optional hook that is called when selected is changed
   */
  onChange: PropTypes.func,
  /**
   * Provide an optional function to be called when the tag is clicked.
   */
  onClick: PropTypes.func,
  /**
   * Specify the state of the selectable tag.
   */
  selected: PropTypes.bool,
  /**
   * Specify the default state of the selectable tag.
   */
  defaultSelected: PropTypes.bool,
  /**
   * Specify the size of the Tag. Currently supports either `sm`,
   * `md` (default) or `lg` sizes.
   */
  size: PropTypes.oneOf(Object.keys(Tag.SIZES)),
  /**
   * Provide text to be rendered inside of a the tag.
   */
  text: PropTypes.string
};

exports.default = SelectableTag;