@carbon/react/es/components/Tag/OperationalTag.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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
import cx from 'classnames';
import { useId } from '../../internal/useId.js';
import { usePrefix } from '../../internal/usePrefix.js';
import Tag, { SIZES } from './Tag.js';
import '../Tooltip/DefinitionTooltip.js';
import { Tooltip } from '../Tooltip/Tooltip.js';
import '../Text/index.js';
import { isEllipsisActive } from './isEllipsisActive.js';
import mergeRefs from '../../tools/mergeRefs.js';
import { Text } from '../Text/Text.js';

const TYPES = {
  red: 'Red',
  magenta: 'Magenta',
  purple: 'Purple',
  blue: 'Blue',
  cyan: 'Cyan',
  teal: 'Teal',
  green: 'Green',
  gray: 'Gray',
  'cool-gray': 'Cool-Gray',
  'warm-gray': 'Warm-Gray'
};
const OperationalTag = /*#__PURE__*/forwardRef(({
  className,
  disabled,
  id,
  renderIcon,
  size,
  text,
  type = 'gray',
  ...other
}, forwardRef) => {
  const prefix = usePrefix();
  const tagRef = useRef(null);
  const tagId = id || `tag-${useId()}`;
  const tagClasses = cx(`${prefix}--tag--operational`, className);
  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
  useLayoutEffect(() => {
    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
    setIsEllipsisApplied(isEllipsisActive(newElement));
  }, [prefix, tagRef]);
  const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
  const combinedRef = mergeRefs(tagRef, forwardRef);
  if (isEllipsisApplied) {
    return /*#__PURE__*/React.createElement(Tooltip, {
      label: text,
      align: "bottom",
      className: tooltipClasses,
      leaveDelayMs: 0,
      onMouseEnter: () => false,
      closeOnActivation: true
    }, /*#__PURE__*/React.createElement(Tag, _extends({
      ref: combinedRef,
      type: type,
      size: size,
      renderIcon: renderIcon,
      disabled: disabled,
      className: tagClasses,
      id: tagId
    }, other), /*#__PURE__*/React.createElement(Text, {
      title: text,
      className: `${prefix}--tag__label`
    }, text)));
  }
  return /*#__PURE__*/React.createElement(Tag, _extends({
    ref: combinedRef,
    type: type,
    size: size,
    renderIcon: renderIcon,
    disabled: disabled,
    className: tagClasses,
    id: tagId
  }, other), /*#__PURE__*/React.createElement(Text, {
    title: text,
    className: `${prefix}--tag__label`
  }, text));
});
OperationalTag.propTypes = {
  /**
   * Provide a custom className that is applied to the containing <span>
   */
  className: PropTypes.string,
  /**
   * Specify if the `OperationalTag` 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]),
  /**
   * Specify the size of the Tag. Currently supports either `sm`,
   * `md` (default) or `lg` sizes.
   */
  size: PropTypes.oneOf(Object.keys(SIZES)),
  /**
   * Provide text to be rendered inside of a the tag.
   */
  text: PropTypes.string,
  /**
   * Specify the type of the `Tag`
   */
  type: PropTypes.oneOf(Object.keys(TYPES))
};

export { OperationalTag as default };