@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
89 lines (88 loc) • 4 kB
JavaScript
/* more-indicator.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./more-indicator.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useCallback } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
var boxShadowCssVar = '--avatar-box-shadow';
var styles = {
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _jlxit94y",
circle: "_2rko1qll",
activeScale: "_1q8w1np6",
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
activeStateScale: "_t9ec1np6",
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
hexagon: "_mkrz1k6g"
};
var widthHeightMap = {
xsmall: "_1bsb7vkz _4t3i7vkz",
small: "_1bsb1tcg _4t3i1tcg",
medium: "_1bsbzwfg _4t3izwfg",
large: "_1bsb1ylp _4t3i1ylp",
xlarge: "_1bsb16xz _4t3i16xz",
xxlarge: "_1bsb1qr7 _4t3i1qr7"
};
var borderRadiusMap = {
xsmall: "_2rkolb4i _14mjlb4i",
small: "_2rkolb4i _14mjlb4i",
medium: "_2rkofajl _14mjfajl",
large: "_2rkofajl _14mjfajl",
xlarge: "_2rko1qi0 _14mj1qi0",
xxlarge: "_2rkopb1k _14mjpb1k"
};
var fontMap = {
small: "_11c8wadc",
medium: "_11c8wadc",
large: "_11c8wadc",
xlarge: "_11c81d4k",
xxlarge: "_11c81d4k"
};
var MAX_DISPLAY_COUNT = 99;
var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? "var(--ds-surface, #FFFFFF)" : _ref$borderColor,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
_ref$count = _ref.count,
count = _ref$count === void 0 ? 0 : _ref$count,
testId = _ref.testId,
onClick = _ref.onClick,
ariaControls = _ref['aria-controls'],
ariaExpanded = _ref['aria-expanded'],
ariaHaspopup = _ref['aria-haspopup'],
moreIndicatorLabel = _ref.moreIndicatorLabel,
_ref$buttonProps = _ref.buttonProps,
buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
isActive = _ref.isActive;
var onClickHander = useCallback(function (event, analyticsEvent) {
if (buttonProps.onClick) {
buttonProps.onClick(event);
}
onClick(event, analyticsEvent);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[buttonProps.onClick, onClick]);
var displayCount = count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count;
var providedAriaLabel = moreIndicatorLabel || buttonProps['aria-label'];
var ariaLabel = providedAriaLabel ? providedAriaLabel : "".concat(displayCount, " more people");
return /*#__PURE__*/React.createElement("button", _extends({
type: "submit"
}, buttonProps, {
onClick: onClickHander,
ref: ref,
"data-testid": testId,
"aria-controls": ariaControls,
"aria-expanded": ariaExpanded,
"aria-haspopup": ariaHaspopup,
"aria-label": ariaLabel,
style: _defineProperty({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
className: ax([styles.root, !fg('remove_scaling_from_avatar_stack') && styles.activeScale, borderRadiusMap[size], appearance === 'circle' && styles.circle, appearance === 'hexagon' && fg('jira-ai-agent-stack') && styles.hexagon, widthHeightMap[size], fontMap[size], isActive && styles.active, isActive && !fg('remove_scaling_from_avatar_stack') && styles.activeStateScale])
}), "+", displayCount);
});
MoreIndicator.displayName = 'MoreIndicator';
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default MoreIndicator;