@atlaskit/avatar-group/dist/cjs/components/more-indicator.js

An avatar group displays a number of avatars grouped together in a stack or grid.

/* more-indicator.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./more-indicator.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var boxShadowCssVar = '--avatar-box-shadow';
var styles = {
  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhkm7j4 _syaz1fxt _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr315ej _30l31fxt _1di6ip91 _9h8h1fxt _1q8w1np6 _jlxit94y",
  circle: "_2rko1q5u",
  active: "_bfhkfg4m _16qsqz53 _syazaqb7 _t9ec1np6 _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
  disabled: "_80om13gf _1peqs237 _1hfkvuon"
};
var widthHeightMap = {
  xsmall: "_1bsb7vkz _4t3i7vkz",
  small: "_1bsb1tcg _4t3i1tcg",
  medium: "_1bsbzwfg _4t3izwfg",
  large: "_1bsb1ylp _4t3i1ylp",
  xlarge: "_1bsb16xz _4t3i16xz",
  xxlarge: "_1bsb1qr7 _4t3i1qr7"
};
var borderRadiusMap = {
  xsmall: "_2rkoyh40 _14mjyh40",
  small: "_2rkoyh40 _14mjyh40",
  medium: "_2rko1l7b _14mj1l7b",
  large: "_2rko1l7b _14mj1l7b",
  xlarge: "_2rkoi2wt _14mji2wt",
  xxlarge: "_2rko1crf _14mj1crf"
};
var fontMap = {
  small: "_11c81o8v",
  medium: "_11c81o8v",
  large: "_11c8dcr7",
  xlarge: "_11c81ixg",
  xxlarge: "_11c81ixg"
};
var MAX_DISPLAY_COUNT = 99;
var MoreIndicator = /*#__PURE__*/(0, _react.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 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-border-inverse, #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 = (0, _react.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", (0, _extends2.default)({
    type: "submit"
  }, buttonProps, {
    onClick: onClickHander,
    ref: ref,
    "data-testid": testId,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-haspopup": ariaHaspopup,
    "aria-label": ariaLabel,
    style: (0, _defineProperty2.default)({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
    className: (0, _runtime.ax)([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
  }), "+", displayCount);
});
MoreIndicator.displayName = 'MoreIndicator';

// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = MoreIndicator;