@atlaskit/tag
Version:
A tag labels UI objects for quick recognition and navigation.
285 lines (277 loc) • 12.7 kB
JavaScript
/* tag-new.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
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';
const 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).
const 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.
const 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.
const borderIconInteractiveFilterStyles = {
root: "_4cvxip4g _zqoiipvw _q4ztip4g _ba35u0j8"
};
const 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
*/
const TagNewComponent = /*#__PURE__*/forwardRef(function TagNew({
color = 'gray',
text,
elemBefore,
href,
linkComponent,
isRemovable = true,
removeButtonLabel,
onBeforeRemoveAction,
onAfterRemoveAction,
testId,
maxWidth,
hasMargin = true,
onClick,
swatchBefore,
swatchBeforeLabel,
swatchBeforeRole,
trailingMetric,
...other
}, ref) {
const normalizedText = getTagText(text);
const isMotionEnabled = fg('platform-dst-motion-uplift-labels');
const {
status,
handleRemoveRequest,
onKeyPress,
removingTag,
showingTag
} = useTagRemoval(onBeforeRemoveAction);
const onShrinkOutExitComplete = useCallback(() => {
onAfterRemoveAction === null || onAfterRemoveAction === void 0 ? void 0 : onAfterRemoveAction(normalizedText);
}, [normalizedText, onAfterRemoveAction]);
const {
isLink,
LinkComponent
} = useLink(href, linkComponent);
const {
isLinkHovered,
isOverButton,
isButtonFocused,
isLinkFocused,
buttonHandlers,
linkHandlers
} = useButtonInteraction();
const removeButton = useRemoveButton({
isRemovable,
tagText: normalizedText,
removeButtonLabel,
testId,
handleRemoveRequest,
removingTag,
showingTag,
onKeyPress,
buttonHandlers
});
const renderTagContent = (tagRef, isEntering = false, isExiting = false, hasEllipsis = null) => /*#__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
} : 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 && `${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
}, ({
hasEllipsis,
isEntering,
isExiting,
ref: motionRef
}) => 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 const TagDropdownTriggerComponent = /*#__PURE__*/forwardRef(function TagDropdownTrigger({
color = 'gray',
text,
elemBefore,
testId,
maxWidth,
hasMargin = true,
onClick,
isSelected = false,
isLoading = false,
analyticsContext: _analyticsContext,
hasChevron = true,
swatchBefore,
swatchBeforeLabel,
swatchBeforeRole,
trailingMetric,
...other
}, ref) {
const resolvedColor = colorMapping[color] || 'gray';
const 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 && `${testId}--metric`,
className: ax([styles.trailingMetric])
}, trailingMetric), hasChevron && /*#__PURE__*/React.createElement(ChevronDownIcon, {
label: "",
size: "small",
color: 'currentColor',
testId: testId && `${testId}--chevron`
})), isLoading && /*#__PURE__*/React.createElement("span", {
className: ax([dropdownStyles.loadingOverlay, isMotionEnabled && dropdownStyles.loadingOverlayMotion])
}, /*#__PURE__*/React.createElement(Spinner, {
size: 'xsmall',
label: ", Loading",
testId: testId ? `${testId}--loading-spinner` : undefined
})));
});
/**
* __Tag new__
*/
const TagNew = markAsTagMotionCapable( /*#__PURE__*/memo(TagNewComponent));
export default TagNew;
export { colorMapping } from './color-mapping';