{"version":3,"file":"AvatarGroup.mjs","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useCallback, useMemo } from 'react'\nimport * as React from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type AlphaAvatarProps,\n  type AlphaAvatarSize,\n  useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { AvatarContextProvider } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n  'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n  const restCount = count - max\n  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(size: AlphaAvatarSize) {\n  return (\n    {\n      16: 'xxs',\n      20: 'xxs',\n      24: 'xs',\n      30: 's',\n      36: 'm',\n      42: 'm',\n      48: 'l',\n      72: 'l',\n      90: 'l',\n      120: 'l',\n    } as const\n  )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n  return (\n    {\n      16: '12',\n      20: '12',\n      24: '13',\n      30: '15',\n      36: '16',\n      42: '18',\n      48: '24',\n      72: '24',\n      90: '24',\n      120: '24',\n    } as const\n  )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n *  max={2}\n *  size=\"24\"\n *  spacing={4}\n *  ellipsisType=\"icon\"\n * >\n *    <Avatar />\n *    <Avatar />\n *    <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup(\n    {\n      max = 5,\n      size = '24',\n      spacing = AVATAR_GROUP_DEFAULT_SPACING,\n      ellipsisType = 'icon',\n      style,\n      className,\n      children,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n    const avatarListCount = React.Children.count(children)\n\n    const renderAvatarElement = useCallback(\n      (avatar: React.ReactElement<AlphaAvatarProps>) => {\n        const key =\n          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n        const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n        const showBorder = avatar.props.showBorder || shouldShowBorder\n        return React.cloneElement(avatar, { key, showBorder })\n      },\n      [avatarListCount, max, spacing]\n    )\n\n    const AvatarListComponent = useMemo(() => {\n      return React.Children.toArray(children)\n        .slice(0, max)\n        .map((avatar, index, arr) => {\n          if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n            return null\n          }\n\n          const AvatarElement = renderAvatarElement(avatar)\n\n          if (!isLastIndex(arr, index) || avatarListCount <= max) {\n            return AvatarElement\n          }\n\n          if (ellipsisType === 'icon') {\n            return (\n              <div\n                key=\"ellipsis\"\n                className={styles.AvatarEllipsisIconWrapper}\n                data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n              >\n                <SmoothCornersBox\n                  borderRadius={AVATAR_BORDER_RADIUS}\n                  backgroundColor=\"fill-absolute-black-light\"\n                  className={styles.AvatarEllipsisIcon}\n                >\n                  <Icon\n                    source={MoreIcon}\n                    size={getProperIconSize(size)}\n                    color=\"text-absolute-white\"\n                  />\n                </SmoothCornersBox>\n                {AvatarElement}\n              </div>\n            )\n          }\n\n          if (ellipsisType === 'count') {\n            return (\n              <React.Fragment key=\"ellipsis\">\n                {AvatarElement}\n                <div\n                  style={\n                    {\n                      '--b-avatar-group-ellipsis-ml': px(\n                        Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n                      ),\n                    } as React.CSSProperties\n                  }\n                  className={classNames(styles.AvatarEllipsisCountWrapper)}\n                >\n                  <Text\n                    typo={getProperTypoSize(size)}\n                    color=\"text-neutral-lighter\"\n                    className={styles.AvatarEllipsisCount}\n                  >\n                    {getRestAvatarListCountText(avatarListCount, max)}\n                  </Text>\n                </div>\n              </React.Fragment>\n            )\n          }\n\n          return null\n        })\n    }, [\n      avatarListCount,\n      max,\n      children,\n      renderAvatarElement,\n      ellipsisType,\n      AVATAR_BORDER_RADIUS,\n      size,\n      spacing,\n    ])\n\n    return (\n      <AvatarContextProvider\n        value={useMemo(\n          () => ({\n            size,\n          }),\n          [size]\n        )}\n      >\n        <div\n          role=\"group\"\n          ref={forwardedRef}\n          className={classNames(\n            styles.AvatarGroup,\n            styles[`size-${size}`],\n            className\n          )}\n          style={\n            {\n              '--b-avatar-group-spacing': px(spacing),\n              ...style,\n            } as React.CSSProperties\n          }\n          {...rest}\n        >\n          {AvatarListComponent}\n        </div>\n      </AvatarContextProvider>\n    )\n  }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","_avatar$key","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","_jsxs","styles","AvatarEllipsisIconWrapper","_jsx","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","AvatarContextProvider","value","role","ref"],"mappings":"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"}