@mskcc/carbon-react/es/components/MskTag/next/Tag.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
import { Icon } from '../../Icon/MskIcon.js';

var _Icon;
const getInstanceId = setupGetInstanceId();
const TagTypes = ['red', 'magenta', 'purple', 'blue', 'cyan', 'teal', 'green', 'gray', 'cool-gray', 'warm-gray', 'high-contrast', 'outline', 'ghost'];
const TagSizes = ['sm', 'md', 'lg'];
const Tag = _ref => {
  let {
    children,
    className,
    id = `tag-${getInstanceId()}`,
    type = 'gray',
    icon,
    renderIcon: CustomIconElement,
    title,
    disabled,
    onClose,
    size = 'md',
    as: BaseComponent,
    ...other
  } = _ref;
  const tagClasses = cx(`msk-tag-v2`, className, {
    [`msk-tag-v2--${type}`]: type,
    [`msk-tag-v2--size-${size}`]: size,
    [`msk-tag-v2--disabled`]: disabled,
    [`msk-tag-v2--interactive`]: other.onClick && !onClose,
    [`msk-tag-v2--single`]: !onClose
  });
  const handleClose = event => {
    if (onClose) {
      event.stopPropagation();
      onClose(event);
    }
  };
  if (onClose) {
    const ComponentTag = BaseComponent ?? 'div';
    const ComponentTagInner = 'div';
    const {
      onClick,
      ...rest
    } = other;
    return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
      disabled: ComponentTag === 'button' ? disabled : null,
      className: tagClasses,
      id: id,
      title: typeof children === 'string' ? children : null
    }, rest), /*#__PURE__*/React__default.createElement(ComponentTagInner, {
      className: "msk-tag-v2--content-container"
    }, CustomIconElement ? /*#__PURE__*/React__default.createElement(CustomIconElement, null) : icon !== undefined ? /*#__PURE__*/React__default.createElement(Icon, {
      icon: icon,
      className: "msk-tag--icon-left"
    }) : null, /*#__PURE__*/React__default.createElement("span", {
      className: "msk-tag-v2--content",
      title: typeof children === 'string' ? children : undefined
    }, children !== null && children !== undefined ? children : null)), /*#__PURE__*/React__default.createElement("button", {
      onClick: handleClose,
      disabled: disabled,
      className: 'msk-tag-v2--close-btn'
    }, _Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, {
      icon: "clear"
    }))));
  }
  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
  return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
    disabled: ComponentTag === 'button' ? disabled : null,
    className: tagClasses,
    id: id,
    title: typeof children === 'string' ? children : null
  }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement(CustomIconElement, null) : icon !== undefined ? /*#__PURE__*/React__default.createElement(Icon, {
    icon: icon,
    className: "msk-tag--icon-left"
  }) : null, /*#__PURE__*/React__default.createElement("span", {
    className: "msk-tag-v2--content",
    title: typeof children === 'string' ? children : undefined
  }, children !== null && children !== undefined ? children : null));
};
Tag.displayName = 'Tag';
Tag.propTypes = {
  /**
   * Provide an alternative tag or component to use instead of the default
   * wrapping element
   */
  as: PropTypes.elementType,
  /**
   * Provide content to be rendered inside of a <Tag>
   */
  children: PropTypes.node,
  /**
   * Provide a custom className that is applied to the containing <span>
   */
  className: PropTypes.string,
  /**
   * Specify if the <Tag> is disabled
   */
  disabled: PropTypes.bool,
  /**
   * Specify the id for the tag.
   */
  id: PropTypes.string,
  /**
   * Click handler for filter tag right icon, default to close button.
   */
  onClose: PropTypes.func,
  /**
   * select msk icon.
   */
  icon: PropTypes.string,
  /**
   * Optional prop to render a custom left icon.
   * Can be a React component class
   */
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Specify the size of the Tag. Currently supports either `sm` or
   * 'md' (default) sizes.
   */
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  /**
   * Text to show on clear filters
   */
  title: PropTypes.string,
  /**
   * Specify the type of the <Tag>
   */
  type: PropTypes.string
};

export { Tag, TagSizes, TagTypes, Tag as default };