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

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

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef } from 'react';
import Avatar from '@atlaskit/avatar';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
import { fg } from '@atlaskit/platform-feature-flags';
import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    avatar,
    avatarComponent,
    index,
    onAvatarClick,
    testId,
    avatarOverrides,
    role
  } = props;
  const {
    analyticsContext,
    appearance,
    as,
    borderColor: _borderColor,
    children,
    href,
    isDisabled,
    key: _key,
    label,
    name,
    onClick,
    presence,
    size: _size,
    src,
    stackIndex,
    status,
    tabIndex,
    target,
    testId: _groupItemTestId,
    ...rest
  } = avatar;
  const itemRef = useRegisterItemWithFocusManager();
  const CustomComponent = ({
    children,
    className,
    disabled,
    draggable,
    onClick,
    onDragStart,
    onMouseDown,
    ref,
    tabIndex,
    'data-testid': testId,
    ...props
  }) => {
    return /*#__PURE__*/React.createElement("button", _extends({
      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,
      role: role
      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
    }, props), children);
  };
  const AvatarComponent = fg('platform-avatar-group-pass-avatar-to-item') ? avatarComponent !== null && avatarComponent !== void 0 ? avatarComponent : Avatar : Avatar;
  const AvatarIcon = avatarOverrides && fg('platform-avatar-group-pass-avatar-to-item') ? avatarOverrides.render(AvatarComponent, {
    ...rest,
    analyticsContext,
    appearance,
    as,
    borderColor: 'transparent',
    children,
    isDisabled,
    label,
    name: '',
    presence,
    size: 'small',
    src,
    stackIndex,
    status,
    tabIndex,
    testId: testId && `${testId}--avatar`
  }, 0) : /*#__PURE__*/React.createElement(AvatarComponent, _extends({}, 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 && `${testId}--avatar`
  }));

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

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default AvatarGroupItem;