{"version":3,"file":"AvatarGroup.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarGroupSize,\n  AvatarGroupVariant,\n  TextColor,\n} from '@metamask/design-system-shared';\nimport type { AvatarBaseSize } from '@metamask/design-system-shared';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport { AvatarAccount } from '../AvatarAccount';\nimport { AvatarBase } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport { AvatarFavicon } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport { AvatarNetwork } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\nimport { AvatarToken } from '../AvatarToken';\n\nimport {\n  AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      variant,\n      avatarPropsArr,\n      size = AvatarGroupSize.Md,\n      max = 4,\n      isReverse = false,\n      overflowTextProps,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const overflowCounter = avatarPropsArr.length - max;\n    const shouldRenderOverflowCounter = overflowCounter > 0;\n    const negativeSpaceBetweenAvatarsTwClassName = isReverse\n      ? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]\n      : AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];\n    const containerClassNames = twMerge(\n      // Base style\n      'inline-flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n      className,\n    );\n    const avatarListContainerClassNames = twMerge(\n      // Base style\n      'flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n    );\n    const overflowTextContainerClassNames = twMerge(\n      // Base style\n      'bg-icon-default',\n      // Negative spacing\n      negativeSpaceBetweenAvatarsTwClassName,\n    );\n\n    const renderAvatarList = useCallback(\n      () =>\n        avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n          switch (variant) {\n            case AvatarGroupVariant.Account:\n              return (\n                <AvatarAccount\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarAccountProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Favicon:\n              return (\n                <AvatarFavicon\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarFaviconProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Network:\n              return (\n                <AvatarNetwork\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarNetworkProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Token:\n              return (\n                <AvatarToken\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarTokenProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            default:\n              throw new Error(\n                `Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`,\n              );\n          }\n        }),\n      [\n        avatarPropsArr,\n        max,\n        negativeSpaceBetweenAvatarsTwClassName,\n        size,\n        variant,\n      ],\n    );\n\n    return (\n      <div ref={ref} {...props} style={style} className={containerClassNames}>\n        <div className={avatarListContainerClassNames}>\n          {renderAvatarList()}\n        </div>\n        {shouldRenderOverflowCounter && (\n          <AvatarBase\n            className={overflowTextContainerClassNames}\n            style={{\n              zIndex: avatarPropsArr.length,\n            }}\n            hasBorder\n            fallbackText={`+${overflowCounter}`}\n            fallbackTextProps={{\n              variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[size],\n              color: TextColor.PrimaryInverse,\n            }}\n            size={size}\n            shape={\n              variant === AvatarGroupVariant.Network\n                ? AvatarBaseShape.Square\n                : AvatarBaseShape.Circle\n            }\n            {...overflowTextProps}\n          />\n        )}\n      </div>\n    );\n  },\n);\n"]}