@atlaskit/avatar-group/dist/cjs/components/avatar-group-item.js

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

"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;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _menu = require("@atlaskit/menu");
var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
var _excluded = ["analyticsContext", "appearance", "as", "borderColor", "children", "href", "isDisabled", "key", "label", "name", "onClick", "presence", "size", "src", "stackIndex", "status", "tabIndex", "target", "testId"],
  _excluded2 = ["children", "className", "disabled", "draggable", "onClick", "onDragStart", "onMouseDown", "ref", "tabIndex", "data-testid"];
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 AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var avatar = props.avatar,
    index = props.index,
    onAvatarClick = props.onAvatarClick,
    testId = props.testId;
  var analyticsContext = avatar.analyticsContext,
    appearance = avatar.appearance,
    as = avatar.as,
    borderColor = avatar.borderColor,
    children = avatar.children,
    href = avatar.href,
    isDisabled = avatar.isDisabled,
    key = avatar.key,
    label = avatar.label,
    name = avatar.name,
    onClick = avatar.onClick,
    presence = avatar.presence,
    size = avatar.size,
    src = avatar.src,
    stackIndex = avatar.stackIndex,
    status = avatar.status,
    tabIndex = avatar.tabIndex,
    target = avatar.target,
    groupItemTestId = avatar.testId,
    rest = (0, _objectWithoutProperties2.default)(avatar, _excluded);
  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
  var CustomComponent = function CustomComponent(_ref) {
    var children = _ref.children,
      className = _ref.className,
      disabled = _ref.disabled,
      draggable = _ref.draggable,
      onClick = _ref.onClick,
      onDragStart = _ref.onDragStart,
      onMouseDown = _ref.onMouseDown,
      ref = _ref.ref,
      tabIndex = _ref.tabIndex,
      testId = _ref['data-testid'],
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
    return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
      type: "button"
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      ,
      className: className,
      disabled: disabled,
      draggable: draggable,
      onClick: onClick
      // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
      ,
      onDragStart: onDragStart,
      onMouseDown: onMouseDown,
      ref: ref,
      tabIndex: tabIndex,
      "data-testid": testId
      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
    }, props), children);
  };
  var AvatarIcon = /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, rest, {
    analyticsContext: analyticsContext,
    appearance: appearance,
    as: as,
    borderColor: "transparent",
    children: children,
    isDisabled: isDisabled,
    label: label,
    name: "",
    presence: presence,
    size: "small",
    src: src,
    stackIndex: stackIndex,
    status: status,
    tabIndex: tabIndex,
    testId: testId && "".concat(testId, "--avatar")
  }));

  // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
  var callback = onClick || onAvatarClick;
  if (href) {
    return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
      ref: (0, _mergeRefs.default)([ref, itemRef]),
      href: href,
      target: target,
      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
      iconBefore: AvatarIcon,
      testId: testId,
      onClick: function onClick(event) {
        return callback && callback(event, undefined, index);
      }
    }, name);
  }
  if (typeof callback === 'function') {
    return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
      ref: (0, _mergeRefs.default)([ref, itemRef]),
      onClick: function onClick(event) {
        return callback && callback(event, undefined, index);
      },
      iconBefore: AvatarIcon,
      testId: testId
    }, name);
  }
  return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
    iconBefore: AvatarIcon,
    component: CustomComponent,
    testId: testId
  }, name);
});

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