@atlaskit/tag/dist/esm/tag-new/tag-new.js

A tag labels UI objects for quick recognition and navigation.

/* tag-new.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["color", "text", "elemBefore", "href", "linkComponent", "isRemovable", "removeButtonLabel", "onBeforeRemoveAction", "onAfterRemoveAction", "testId", "maxWidth", "hasMargin", "onClick", "swatchBefore", "swatchBeforeLabel", "swatchBeforeRole", "trailingMetric"],
  _excluded2 = ["color", "text", "elemBefore", "testId", "maxWidth", "hasMargin", "onClick", "isSelected", "isLoading", "analyticsContext", "hasChevron", "swatchBefore", "swatchBeforeLabel", "swatchBeforeRole", "trailingMetric"];
import "./tag-new.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required, @atlaskit/volt-strict-mode/no-re-exports, @atlaskit/editor/no-re-export -- VOLTC-139 tracks removal of these deprecated re-export shims. */

// Clips tag text during motion and restores ellipsis only when the settled label truncates.
import { forwardRef, memo, useCallback } from 'react';
import { cx } from '@compiled/react';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Pressable } from '@atlaskit/primitives/compiled';
import Spinner from '@atlaskit/spinner/spinner';
import { colorMapping } from './color-mapping';
import { getTagText } from './get-tag-text';
import { LinkWrapper } from './link-wrapper';
import { RemovableWrapper } from './removable-wrapper';
import SwatchBefore from './swatch-before';
import { TagMotion } from './tag-motion';
import { markAsTagMotionCapable } from './tag-motion-capability';
import { useButtonInteraction } from './use-button-interaction';
import { useLink } from './use-link';
import { useRemoveButton } from './use-remove-button';
import { useTagRemoval } from './use-tag-removal';
var styles = {
  baseStyles: "_zulp1b66 _2rko12b0 _11c8wadc _1dqonqa1 _189ee4h9 _1rjcv77o _18zr1mie _1mou1b66 _195g1b66 _1e0c116y _vchhusvi _1ul9idpf _p12ff6dh _4t3i1k92 _kqswh2mm _4cvr1h6o _80om73ad _bfhksm61 _1rfu1q9c",
  noMarginStyles: "_1mouze3t _195gze3t",
  removableStyles: "_zulp1b66",
  beforeStyles: "_4bfu1snc _1hmsagmp _ajmmvv82 _1e0c116y _4cvr1h6o _1o9zidpf _syaz125o",
  beforeStylesSelected: "_syazxl6c",
  textStyles: "_1reo15vq _18m915vq _o5721q9c _16jlkb7n _1ul9idpf _syazi7uo",
  textEllipsis: "_1bto1l2s",
  textClip: "_1btozryt",
  textStylesSelected: "_syaz6x5g",
  afterStyles: "_1e0c1txw _4cvr1h6o _1o9zidpf _lcxv1wug _kqswh2mm",
  afterMotionStyles: "_1ul9utpp",
  trailingMetric: "_2rkolb4i _11c8wadc _18zr1b66 _1rjcidpf _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _4cvr1h6o _1o9zidpf _1kz6184x _bfhk1w9g _syazi7uo",
  trailingMetricEndPadding: "_y4ti303w",
  focusRingStyles: "_1ygbdfik _1ah3v77o",
  childFocusRingStyles: "_1a37dfik _1cwgv77o",
  interactiveBaseStyles: "_80omtlke _1all1b66 _qsdj1r31 _17ncglyw _15hpnqa1 _1rg815vq _1yoo15vq _j8j91snc _1afaagmp _gdbt10yn _h5vp116y _1qxz1h6o _8zx0idpf _1km4jdj5 _wc1fagmp _9408jdj5 _usew1snc _ebtnagmp _uvk910yn _10nj1r31 _1xq0glyw _18x1nqa1 _2mpsagmp",
  interactiveHoverStyles: "_17501r31 _qrsc8stv _1wodnqa1 _irr31dpa _rlyhjdj5 _1di6fcek",
  interactiveMotionStyles: "_v564k6bl _1ggl5xtf",
  activeMotionStyles: "_1reo15vq _18m915vq"
};

// For accent borders, we use the new color.border.accent.*.subtle tokens (Color300
// light / Color800 dark) which provide proper decorative-border colours
//
// Icons keep color.icon.accent.* in the default state (vibrant on the plain page
// background) and swap to color.text.accent.* in hovered/pressed states (where the
// Tag picks up a coloured background and needs guaranteed 3:1 icon contrast).
var colorStyles = {
  gray: "_119bmsup _1ib21diz _egnk1sqi _17x31sqi _ih6z7qp0",
  blue: "_119b18hp _1ib26txe _egnk16jw _17x316jw _ih6z1dy8",
  green: "_119b5d2u _1ib217hp _egnkh55r _17x3h55r _ih6z1wnw",
  red: "_119bn9dc _1ib2nbxb _egnk9lu1 _17x39lu1 _ih6z1rtt",
  yellow: "_119b1s7j _1ib21oqg _egnkfb2s _17x3fb2s _ih6z1773",
  purple: "_119bluwt _1ib2uq3u _egnkqmo9 _17x3qmo9 _ih6z1nm4",
  lime: "_119b1m7d _1ib28645 _egnk1tco _17x31tco _ih6zz2ec",
  magenta: "_119b132u _1ib2v8hk _egnk1s8m _17x31s8m _ih6zv9ra",
  orange: "_119b1ip5 _1ib21j6y _egnkp1lv _17x3p1lv _ih6z165s",
  teal: "_119b131p _1ib28uof _egnk17qg _17x317qg _ih6z1a17"
};

// Border + icon filter styles - base state.
// Borders use the new color.border.accent.*.subtle tokens directly.
// Icons use the color.icon.accent.* tokens directly in the default state.
var borderIconFilterStyles = {
  root: "_1h6dip4g _wi6h9ea2"
};

// Border + icon filter styles - interactive states (hover/pressed).
// Icons swap to the color.text.accent.* tokens for guaranteed 3:1 contrast
// against the coloured interactive backgrounds. Borders stay constant.
var borderIconInteractiveFilterStyles = {
  root: "_4cvxip4g _zqoiipvw _q4ztip4g _ba35u0j8"
};
var dropdownStyles = {
  interactive: "_irr31dpa _1di6fcek",
  selected: "_1h6dq98m _syaz6x5g _bfhk15s3 _irr3ufnl _1di6nozp",
  content: "_zulp1b66 _1reo15vq _18m915vq _1e0c116y _4cvr1h6o _16jlkb7n _1o9zkb7n _1ul9idpf",
  loadingMotion: "_k8m0brmi _1oec1ign _6fl4indk _sedtglyw",
  loadingOverlayMotion: "_j7hq1bym _5sag1ign _1pglindk _1bumglyw",
  loadingContent: "_tzy4idpf",
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw"
};

/**
 * __TagNew__
 *
 * TagNew is the visual uplift implementation of Tag
 */
var TagNewComponent = /*#__PURE__*/forwardRef(function TagNew(_ref, ref) {
  var _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'gray' : _ref$color,
    text = _ref.text,
    elemBefore = _ref.elemBefore,
    href = _ref.href,
    linkComponent = _ref.linkComponent,
    _ref$isRemovable = _ref.isRemovable,
    isRemovable = _ref$isRemovable === void 0 ? true : _ref$isRemovable,
    removeButtonLabel = _ref.removeButtonLabel,
    onBeforeRemoveAction = _ref.onBeforeRemoveAction,
    onAfterRemoveAction = _ref.onAfterRemoveAction,
    testId = _ref.testId,
    maxWidth = _ref.maxWidth,
    _ref$hasMargin = _ref.hasMargin,
    hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
    onClick = _ref.onClick,
    swatchBefore = _ref.swatchBefore,
    swatchBeforeLabel = _ref.swatchBeforeLabel,
    swatchBeforeRole = _ref.swatchBeforeRole,
    trailingMetric = _ref.trailingMetric,
    other = _objectWithoutProperties(_ref, _excluded);
  var normalizedText = getTagText(text);
  var isMotionEnabled = fg('platform-dst-motion-uplift-labels');
  var _useTagRemoval = useTagRemoval(onBeforeRemoveAction),
    status = _useTagRemoval.status,
    handleRemoveRequest = _useTagRemoval.handleRemoveRequest,
    onKeyPress = _useTagRemoval.onKeyPress,
    removingTag = _useTagRemoval.removingTag,
    showingTag = _useTagRemoval.showingTag;
  var onShrinkOutExitComplete = useCallback(function () {
    onAfterRemoveAction === null || onAfterRemoveAction === void 0 || onAfterRemoveAction(normalizedText);
  }, [normalizedText, onAfterRemoveAction]);
  var _useLink = useLink(href, linkComponent),
    isLink = _useLink.isLink,
    LinkComponent = _useLink.LinkComponent;
  var _useButtonInteraction = useButtonInteraction(),
    isLinkHovered = _useButtonInteraction.isLinkHovered,
    isOverButton = _useButtonInteraction.isOverButton,
    isButtonFocused = _useButtonInteraction.isButtonFocused,
    isLinkFocused = _useButtonInteraction.isLinkFocused,
    buttonHandlers = _useButtonInteraction.buttonHandlers,
    linkHandlers = _useButtonInteraction.linkHandlers;
  var removeButton = useRemoveButton({
    isRemovable: isRemovable,
    tagText: normalizedText,
    removeButtonLabel: removeButtonLabel,
    testId: testId,
    handleRemoveRequest: handleRemoveRequest,
    removingTag: removingTag,
    showingTag: showingTag,
    onKeyPress: onKeyPress,
    buttonHandlers: buttonHandlers
  });
  var renderTagContent = function renderTagContent(tagRef) {
    var isEntering = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var isExiting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var hasEllipsis = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
    return /*#__PURE__*/React.createElement("span", _extends({}, other, {
      ref: tagRef,
      "data-testid": testId
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- maxWidth is a runtime consumer value
      ,
      style: maxWidth !== undefined ? {
        maxWidth: maxWidth
      } : undefined,
      className: ax([styles.baseStyles, (isMotionEnabled || !hasMargin) && styles.noMarginStyles, colorStyles[color], borderIconFilterStyles.root, isLink && styles.interactiveBaseStyles, isLink && styles.focusRingStyles, isLink && isMotionEnabled && styles.interactiveMotionStyles, (isEntering || isExiting) && styles.activeMotionStyles, isLink && isLinkHovered && !isOverButton && borderIconInteractiveFilterStyles.root, isLink && isLinkHovered && !isOverButton && styles.interactiveHoverStyles, isRemovable && styles.removableStyles, isLinkFocused && !isButtonFocused && styles.childFocusRingStyles, !isRemovable && trailingMetric != null && trailingMetric !== '' && styles.trailingMetricEndPadding])
    }), /*#__PURE__*/React.createElement(LinkWrapper, {
      isLink: isLink,
      href: href,
      LinkComponent: LinkComponent,
      testId: testId,
      linkHandlers: linkHandlers,
      onClick: onClick
    }, /*#__PURE__*/React.createElement(SwatchBefore, {
      colorKey: color,
      swatchBefore: swatchBefore,
      swatchBeforeLabel: swatchBeforeLabel,
      swatchBeforeRole: swatchBeforeRole
    }), elemBefore && /*#__PURE__*/React.createElement("span", {
      className: ax([styles.beforeStyles])
    }, elemBefore), /*#__PURE__*/React.createElement("span", {
      "data-tag-text": true,
      className: ax([styles.textStyles, hasEllipsis === false ? styles.textClip : styles.textEllipsis])
    }, normalizedText), trailingMetric != null && trailingMetric !== '' && /*#__PURE__*/React.createElement("span", {
      "data-testid": testId && "".concat(testId, "--metric"),
      className: ax([styles.trailingMetric])
    }, trailingMetric)), removeButton && /*#__PURE__*/React.createElement("span", {
      className: ax([styles.afterStyles, isMotionEnabled && styles.afterMotionStyles])
    }, !isExiting && removeButton));
  };
  if (isMotionEnabled) {
    return /*#__PURE__*/React.createElement(TagMotion, {
      forwardedRef: ref,
      hasMargin: hasMargin,
      onExitComplete: isRemovable ? onShrinkOutExitComplete : undefined,
      status: status
    }, function (_ref2) {
      var hasEllipsis = _ref2.hasEllipsis,
        isEntering = _ref2.isEntering,
        isExiting = _ref2.isExiting,
        motionRef = _ref2.ref;
      return renderTagContent(motionRef, isEntering, isExiting, hasEllipsis);
    });
  }
  return /*#__PURE__*/React.createElement(RemovableWrapper, {
    isRemovable: isRemovable,
    status: status,
    onShrinkOutExitComplete: isRemovable ? onShrinkOutExitComplete : undefined
  }, renderTagContent(ref));
});

// Put the tag dropdown trigger in this file to reuse the styles
/**
 * __Tag dropdown trigger__
 *
 * A tag-styled pressable button that acts as a dropdown trigger. Renders a chevron icon
 * and supports selected/loading states. Use this when you need a tag that opens a popup
 * or dropdown menu.
 */

export var TagDropdownTriggerComponent = /*#__PURE__*/forwardRef(function TagDropdownTrigger(_ref3, ref) {
  var _ref3$color = _ref3.color,
    color = _ref3$color === void 0 ? 'gray' : _ref3$color,
    text = _ref3.text,
    elemBefore = _ref3.elemBefore,
    testId = _ref3.testId,
    maxWidth = _ref3.maxWidth,
    _ref3$hasMargin = _ref3.hasMargin,
    hasMargin = _ref3$hasMargin === void 0 ? true : _ref3$hasMargin,
    onClick = _ref3.onClick,
    _ref3$isSelected = _ref3.isSelected,
    isSelected = _ref3$isSelected === void 0 ? false : _ref3$isSelected,
    _ref3$isLoading = _ref3.isLoading,
    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
    _analyticsContext = _ref3.analyticsContext,
    _ref3$hasChevron = _ref3.hasChevron,
    hasChevron = _ref3$hasChevron === void 0 ? true : _ref3$hasChevron,
    swatchBefore = _ref3.swatchBefore,
    swatchBeforeLabel = _ref3.swatchBeforeLabel,
    swatchBeforeRole = _ref3.swatchBeforeRole,
    trailingMetric = _ref3.trailingMetric,
    other = _objectWithoutProperties(_ref3, _excluded2);
  var resolvedColor = colorMapping[color] || 'gray';
  var isMotionEnabled = fg('platform-dst-motion-uplift-labels');
  return /*#__PURE__*/React.createElement(Pressable, _extends({
    ref: ref
    // @ts-expect-error paddingInline is 0.1875rem
    // eslint-disable-next-line @compiled/no-suppress-xcss
    ,
    xcss: cx(styles.baseStyles, !hasMargin && styles.noMarginStyles, colorStyles[resolvedColor], borderIconFilterStyles.root, dropdownStyles.interactive, styles.focusRingStyles, borderIconInteractiveFilterStyles.root, isSelected && dropdownStyles.selected, isMotionEnabled && styles.interactiveMotionStyles,
    // Reduce end padding when trailing metric is the last element (no chevron)
    !hasChevron && trailingMetric != null && trailingMetric !== '' && styles.trailingMetricEndPadding),
    onClick: isLoading ? undefined : onClick,
    style: {
      borderColor: isSelected ? "var(--ds-border-selected, #1868DB)" : undefined,
      cursor: isLoading ? 'progress' : 'pointer',
      maxWidth: maxWidth !== undefined ? maxWidth : undefined
    }
  }, isLoading && {
    'aria-busy': true,
    'aria-disabled': true,
    isDisabled: true
  }, {
    testId: testId
  }, other), /*#__PURE__*/React.createElement("span", {
    className: ax([dropdownStyles.content, isMotionEnabled && dropdownStyles.loadingMotion, isLoading && dropdownStyles.loadingContent])
  }, /*#__PURE__*/React.createElement(SwatchBefore, {
    colorKey: resolvedColor,
    swatchBefore: swatchBefore,
    swatchBeforeLabel: swatchBeforeLabel,
    swatchBeforeRole: swatchBeforeRole
  }), elemBefore && /*#__PURE__*/React.createElement("span", {
    className: ax([styles.beforeStyles, isSelected && styles.beforeStylesSelected])
  }, elemBefore), /*#__PURE__*/React.createElement("span", {
    "data-tag-text": true,
    className: ax([styles.textStyles, styles.textEllipsis, isSelected && styles.textStylesSelected])
  }, getTagText(text)), trailingMetric != null && trailingMetric !== '' && /*#__PURE__*/React.createElement("span", {
    "data-testid": testId && "".concat(testId, "--metric"),
    className: ax([styles.trailingMetric])
  }, trailingMetric), hasChevron && /*#__PURE__*/React.createElement(ChevronDownIcon, {
    label: "",
    size: "small",
    color: 'currentColor',
    testId: testId && "".concat(testId, "--chevron")
  })), isLoading && /*#__PURE__*/React.createElement("span", {
    className: ax([dropdownStyles.loadingOverlay, isMotionEnabled && dropdownStyles.loadingOverlayMotion])
  }, /*#__PURE__*/React.createElement(Spinner, {
    size: 'xsmall',
    label: ", Loading",
    testId: testId ? "".concat(testId, "--loading-spinner") : undefined
  })));
});

/**
 * __Tag new__
 */
var TagNew = markAsTagMotionCapable( /*#__PURE__*/memo(TagNewComponent));
export default TagNew;
export { colorMapping } from './color-mapping';