@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/AvatarGroup/avatarGroupUtils.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import type { AvatarData } from './types'
+import type { AvatarProps } from '../Avatar/types'
+import { AvatarSize } from '../Avatar/types'
+import type { MenuGroupType, MenuItemType } from '../Menu/types'
+
+/**
+ * Creates Menu groups/items from avatar data array
+ */
+export const createMenuItems = (
+    avatars: AvatarData[],
+    selectedIds: (string | number)[],
+    onSelect: (id: string | number) => void,
+    AvatarComponent: React.ComponentType<AvatarProps>
+): MenuGroupType[] => {
+    const items: MenuItemType[] = avatars.map((avatar) => {
+        const isSelected = selectedIds.includes(avatar.id)
+
+        return {
+            label:
+                avatar.alt ||
+                (typeof avatar.fallback === 'string'
+                    ? avatar.fallback
+                    : `Avatar ${avatar.id}`),
+            slot1: (
+                <AvatarComponent
+                    size={AvatarSize.SM} // Always use small size in menu
+                    src={avatar.src}
+                    alt={avatar.alt}
+                    fallback={avatar.fallback}
+                    data-selected={isSelected}
+                />
+            ),
+            onClick: () => onSelect(avatar.id),
+        }
+    })
+
+    return [
+        {
+            items,
+        },
+    ]
+}
+
+/**
+ * Filters avatars based on search term
+ */
+export const filterAvatars = (
+    avatars: AvatarData[],
+    searchTerm: string
+): AvatarData[] => {
+    if (!searchTerm) return avatars
+
+    const lowerSearchTerm = searchTerm.toLowerCase()
+
+    return avatars.filter((avatar) => {
+        const altText = (avatar.alt || '').toLowerCase()
+        const fallbackText =
+            typeof avatar.fallback === 'string'
+                ? avatar.fallback.toLowerCase()
+                : ''
+
+        return (
+            altText.includes(lowerSearchTerm) ||
+            fallbackText.includes(lowerSearchTerm)
+        )
+    })
+}

package/lib/components/AvatarGroup/index.ts

@@ -0,0 +1,3 @@
+export { default as AvatarGroup } from './AvatarGroup'
+export * from './avatarGroup.tokens'
+export * from './types'

package/lib/components/AvatarGroup/types.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'react'
+import type { AvatarProps } from '../Avatar/types'
+import { AvatarSize, AvatarShape } from '../Avatar/types'
+import { SkeletonVariant } from '../Skeleton'
+
+export interface AvatarData extends Omit<AvatarProps, 'className' | 'id'> {
+    id: string | number
+    alt?: string
+    fallback?: string | React.ReactNode
+}
+
+export type AvatarGroupProps = {
+    avatars: AvatarData[]
+    maxCount?: number
+    size?: AvatarSize
+    shape?: AvatarShape
+    selectedAvatarIds?: (string | number)[]
+    onSelectionChange?: (selectedIds: (string | number)[]) => void
+    skeleton?: {
+        show: boolean
+        variant?: SkeletonVariant
+    }
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+
+export type StyledAvatarGroupContainerProps = {
+    $spacing?: string
+}
+
+export type StyledAvatarWrapperProps = {
+    $index: number
+    $total: number
+    $isSelected: boolean
+    $size: AvatarSize
+}
+
+export type StyledOverflowCounterProps = {
+    $size: AvatarSize
+    $shape: AvatarShape
+}

package/lib/components/AvatarV2/AvatarV2.tsx

@@ -0,0 +1,361 @@
+import React, { forwardRef, useState, type ReactElement } from 'react'
+import {
+    AvatarV2Props,
+    AvatarV2Size,
+    AvatarV2Shape,
+    AvatarV2Status,
+    AvatarV2StatusPosition,
+    AvatarV2Variant,
+} from './avatarV2.types'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { AvatarV2TokensType } from './avatarV2.tokens'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import { Skeleton } from '../Skeleton'
+import { filterBlockedProps } from '../../utils/prop-helpers'
+import { VisuallyHidden } from '../../utils/accessibility'
+
+import {
+    getColorFromText,
+    getAccessibleLabel,
+    getAriaLiveValue,
+    getStatusPositionStyles,
+    renderFallbackContent,
+    createKeyboardHandler,
+    isInteractive,
+} from './avatarV2.utils'
+
+const AvatarImage = ({
+    src,
+    alt,
+    onError,
+    onLoad,
+}: {
+    src: string
+    alt: string
+    onError: () => void
+    onLoad?: () => void
+}) => {
+    return (
+        <img
+            src={src}
+            alt={alt}
+            onError={onError}
+            onLoad={onLoad}
+            data-avatar-image="true"
+            role="img"
+            style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                borderRadius: 'inherit',
+            }}
+        />
+    )
+}
+
+const AvatarFallback = ({
+    children,
+    backgroundColor,
+    textColor,
+}: {
+    children: React.ReactNode
+    backgroundColor?: string
+    textColor?: string
+}) => {
+    return (
+        <Block
+            data-avatar-fallback="true"
+            aria-hidden="true"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            width="100%"
+            height="100%"
+            backgroundColor={backgroundColor}
+            color={textColor}
+            style={{
+                userSelect: 'none',
+            }}
+            borderRadius="inherit"
+            overflow="hidden"
+        >
+            {children}
+        </Block>
+    )
+}
+
+const StatusIndicator = ({
+    status,
+    position,
+    size,
+    shape,
+    tokens,
+}: {
+    status: AvatarV2Status
+    position: AvatarV2StatusPosition
+    size: AvatarV2Size
+    shape: AvatarV2Shape
+    tokens: AvatarV2TokensType
+}) => {
+    if (status === AvatarV2Status.NONE) {
+        return null
+    }
+
+    const positionStyles = getStatusPositionStyles(
+        position,
+        size,
+        shape,
+        tokens
+    )
+
+    return (
+        <Block
+            data-avatar-indicator="true"
+            role="presentation"
+            aria-hidden="true"
+            position="absolute"
+            {...positionStyles}
+            display="block"
+            width={tokens.container.status.width[size]}
+            height={tokens.container.status.height[size]}
+            backgroundColor={tokens.container.status.backgroundColor[status]}
+            borderRadius={tokens.container.status.borderRadius}
+            border={tokens.container.status.border[size]}
+            boxShadow={tokens.container.status.boxShadow}
+            zIndex="1"
+        />
+    )
+}
+
+const SlotContainer = ({
+    slot,
+    position,
+    tokens,
+}: {
+    slot?: ReactElement
+    position: 'leading' | 'trailing'
+    tokens: AvatarV2TokensType
+}) => {
+    if (!slot) return null
+
+    return (
+        <Block
+            data-element={`${position}-slot`}
+            display="flex"
+            alignItems="center"
+            width={tokens.slot.width}
+            height={tokens.slot.height}
+        >
+            {slot}
+        </Block>
+    )
+}
+
+const AvatarV2 = forwardRef<HTMLDivElement, AvatarV2Props>(
+    (
+        {
+            src,
+            alt = '',
+            fallbackText,
+            size = AvatarV2Size.MD,
+            shape = AvatarV2Shape.CIRCULAR,
+            status = { type: AvatarV2Status.NONE },
+            leftSlot,
+            rightSlot,
+            skeleton,
+            backgroundColor,
+            disabled,
+            onImageError,
+            onImageLoad,
+            width,
+            height,
+            ...rest
+        },
+        ref
+    ) => {
+        const [imageError, setImageError] = useState(false)
+
+        const tokens = useResponsiveTokens<AvatarV2TokensType>('AVATARV2')
+
+        const hasImage = src && !imageError
+        const shouldShowSkeleton = skeleton?.show
+        const statusType = status?.type || AvatarV2Status.NONE
+        const statusPosition =
+            status?.position || AvatarV2StatusPosition.TOP_RIGHT
+
+        const isInteractiveMode = isInteractive(rest.onClick)
+        const accessibleLabel = getAccessibleLabel(
+            alt,
+            fallbackText,
+            statusType
+        )
+        const ariaLiveValue = getAriaLiveValue(statusType)
+        const fallbackContent = renderFallbackContent(fallbackText, alt)
+        const fallbackColor = backgroundColor || getColorFromText(alt)
+        const avatarVariant = hasImage
+            ? AvatarV2Variant.IMAGE
+            : AvatarV2Variant.TEXT
+
+        const containerWidth = width || tokens.container.width[size]
+        const containerHeight = height || tokens.container.height[size]
+
+        const handleImageError = () => {
+            setImageError(true)
+            onImageError?.(new Error('Failed to load avatar image'))
+        }
+
+        const handleImageLoad = () => {
+            onImageLoad?.()
+        }
+
+        const keyboardHandler = createKeyboardHandler(rest.onClick)
+        const filteredProps = filterBlockedProps(rest)
+
+        const renderAvatarContent = () => {
+            return (
+                <Block
+                    ref={ref}
+                    data-avatar={alt || 'avatar'}
+                    data-variant={avatarVariant}
+                    data-shape={shape}
+                    role="img"
+                    aria-label={accessibleLabel}
+                    aria-live={ariaLiveValue}
+                    tabIndex={
+                        isInteractiveMode ? (disabled ? -1 : 0) : undefined
+                    }
+                    position="relative"
+                    display="inline-flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    width={containerWidth}
+                    height={containerHeight}
+                    borderRadius={tokens.container.borderRadius[shape]}
+                    border={
+                        hasImage
+                            ? tokens.container.image.border
+                            : tokens.container.fallbackText.border
+                    }
+                    backgroundColor={
+                        shouldShowSkeleton
+                            ? 'transparent'
+                            : hasImage
+                              ? 'transparent'
+                              : fallbackColor
+                    }
+                    cursor={
+                        isInteractiveMode
+                            ? disabled
+                                ? 'not-allowed'
+                                : 'pointer'
+                            : 'default'
+                    }
+                    opacity={disabled ? 0.5 : 1}
+                    pointerEvents={disabled ? 'none' : 'auto'}
+                    onClick={!disabled ? rest.onClick : undefined}
+                    onKeyDown={!disabled ? keyboardHandler : undefined}
+                    {...filteredProps}
+                    data-status={
+                        statusType === AvatarV2Status.NONE
+                            ? 'offline'
+                            : statusType
+                    }
+                >
+                    {!shouldShowSkeleton && (
+                        <StatusIndicator
+                            status={statusType}
+                            position={statusPosition}
+                            size={size}
+                            shape={shape}
+                            tokens={tokens}
+                        />
+                    )}
+
+                    {shouldShowSkeleton ? (
+                        <Skeleton
+                            variant={skeleton?.variant || 'pulse'}
+                            width="100%"
+                            height="100%"
+                            borderRadius={tokens.container.borderRadius[shape]}
+                        />
+                    ) : hasImage ? (
+                        <AvatarImage
+                            src={src!}
+                            alt={alt}
+                            onError={handleImageError}
+                            onLoad={handleImageLoad}
+                        />
+                    ) : (
+                        <AvatarFallback
+                            backgroundColor={backgroundColor || fallbackColor}
+                            textColor={tokens.container.fallbackText.color}
+                        >
+                            {typeof fallbackContent === 'string' ? (
+                                <Text
+                                    as="span"
+                                    color="currentColor"
+                                    fontSize={
+                                        tokens.container.fallbackText.fontSize[
+                                            size
+                                        ]
+                                    }
+                                    fontWeight={
+                                        tokens.container.fallbackText
+                                            .fontWeight[size]
+                                    }
+                                    style={{
+                                        lineHeight: '1',
+                                        maxWidth: '100%',
+                                        overflow: 'hidden',
+                                    }}
+                                >
+                                    {fallbackContent}
+                                </Text>
+                            ) : (
+                                fallbackContent
+                            )}
+                        </AvatarFallback>
+                    )}
+
+                    <VisuallyHidden>{accessibleLabel}</VisuallyHidden>
+                </Block>
+            )
+        }
+
+        if (leftSlot || rightSlot) {
+            return (
+                <Block
+                    data-avatar-wrapper="true"
+                    position="relative"
+                    display="inline-flex"
+                    alignItems="center"
+                    data-status={
+                        statusType === AvatarV2Status.NONE
+                            ? 'offline'
+                            : statusType
+                    }
+                    gap={tokens.gap}
+                >
+                    <SlotContainer
+                        slot={leftSlot}
+                        position="leading"
+                        tokens={tokens}
+                    />
+                    {renderAvatarContent()}
+                    <SlotContainer
+                        slot={rightSlot}
+                        position="trailing"
+                        tokens={tokens}
+                    />
+                </Block>
+            )
+        }
+
+        return renderAvatarContent()
+    }
+)
+
+AvatarV2.displayName = 'AvatarV2'
+
+export default AvatarV2