@lax-wp/design-system 0.13.61 → 0.13.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/components/data-display/infinite-table/body/cell/RowActionCell.cjs.js +1 -1
  2. package/dist/components/data-display/infinite-table/body/cell/RowActionCell.cjs.js.map +1 -1
  3. package/dist/components/data-display/infinite-table/body/cell/RowActionCell.es.js +17 -17
  4. package/dist/components/data-display/infinite-table/body/cell/RowActionCell.es.js.map +1 -1
  5. package/dist/components/data-display/infinite-table/index.cjs.js +1 -1
  6. package/dist/components/data-display/infinite-table/index.cjs.js.map +1 -1
  7. package/dist/components/data-display/infinite-table/index.d.ts +2 -2
  8. package/dist/components/data-display/infinite-table/index.es.js +467 -159
  9. package/dist/components/data-display/infinite-table/index.es.js.map +1 -1
  10. package/dist/components/user-avatar/UserAvatar.cjs.js +1 -1
  11. package/dist/components/user-avatar/UserAvatar.cjs.js.map +1 -1
  12. package/dist/components/user-avatar/UserAvatar.es.js +30 -28
  13. package/dist/components/user-avatar/UserAvatar.es.js.map +1 -1
  14. package/dist/components/user-avatar/constants.cjs.js +1 -1
  15. package/dist/components/user-avatar/constants.cjs.js.map +1 -1
  16. package/dist/components/user-avatar/constants.es.js +1 -1
  17. package/dist/components/user-avatar/constants.es.js.map +1 -1
  18. package/package.json +1 -1
package/dist/components/user-avatar/UserAvatar.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials, initialsFontSizeClasses } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\nimport { GroupsIcon } from '../icon';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number | string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n userDetails?: UserDetails | null;\n /** Whether user details are being fetched */\n isFetchingUserDetails?: boolean;\n /** Optional token for authenticated image loading */\n authToken?: string;\n /** Callback triggered when mouse enters the avatar */\n onHover?: () => void;\n /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n // if (firstName === 'All' && lastName === 'Users') {\n // return (\n // <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n // <GroupsIcon className='text-primary-600 dark:text-primary-600 w-xs h-xs' />\n // </div>\n // );\n // }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive || !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const popperRef = useRef<HTMLDivElement | null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n <Typography\n size='large'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[hoverSize])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName || ''} {lastName || ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email || userDetails?.email || ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color || '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id || index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName || avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName === 'All' && lastName === 'Users' ? (\n <div className={cn('rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center')}>\n <GroupsIcon className='text-primary-600 dark:text-primary-600 w-md h-md' />\n </div>\n ) :\n firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700',\n sizeClasses[size],\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[size])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","initialsFontSizeClasses","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","GroupsIcon","PersonIcon","UserAvatarPopper"],"mappings":"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"}
1
+ {"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials, initialsFontSizeClasses } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\nimport { GroupsIcon } from '../icon';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number | string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n userDetails?: UserDetails | null;\n /** Whether user details are being fetched */\n isFetchingUserDetails?: boolean;\n /** Optional token for authenticated image loading */\n authToken?: string;\n /** Callback triggered when mouse enters the avatar */\n onHover?: () => void;\n /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsIcon className='text-primary-600 dark:text-primary-600 w-4 h-4' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive || !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const popperRef = useRef<HTMLDivElement | null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n <Typography\n size='large'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[hoverSize])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName || ''} {lastName || ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email || userDetails?.email || ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color || '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id || index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName || avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) :\n firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700',\n sizeClasses[size],\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[size])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsIcon","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","initialsFontSizeClasses","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
package/dist/components/user-avatar/UserAvatar.es.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsxs as l, jsx as e } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as o } from "react/jsx-runtime";
2
2
  import re from "@mui/icons-material/EditOutlined";
3
3
  import ae from "@mui/icons-material/WarningRounded";
4
- import o from "../../_virtual/index.es.js";
4
+ import l from "../../_virtual/index.es.js";
5
5
  import { useState as B, useRef as v, useMemo as oe, useEffect as F } from "react";
6
6
  import { Typography as n } from "../data-display/typography/Typography.es.js";
7
7
  import { Tag as p } from "../data-display/tag/Tag.es.js";
@@ -13,7 +13,7 @@ import { sizeClasses as M, getInitials as A, initialsFontSizeClasses as $ } from
13
13
  import { PersonIcon as ie } from "./PersonIcon.es.js";
14
14
  import { useDynamicPosition as ce } from "./useDynamicPosition.es.js";
15
15
  import { GroupsIcon as se } from "../icon/icons.generated.es.js";
16
- const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "flex justify-between items-center", children: [
16
+ const k = ({ label: d, content: i }) => /* @__PURE__ */ o("div", { className: "flex justify-between items-center", children: [
17
17
  /* @__PURE__ */ e(n, { size: "small", variant: "medium", className: "mr-5", appearance: "body", children: d }),
18
18
  i
19
19
  ] }), me = ({
@@ -36,6 +36,8 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
36
36
  onHover: Q,
37
37
  currentlyEditing: L
38
38
  }) => {
39
+ if (d === "All" && i === "Users")
40
+ return /* @__PURE__ */ e("div", { className: "p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center", children: /* @__PURE__ */ e(se, { className: "text-primary-600 dark:text-primary-600 w-4 h-4" }) });
39
41
  const [X, N] = B(!1), [T, s] = B(!1), Y = M[y], {
40
42
  triggerRef: Z,
41
43
  dropdownRef: _,
@@ -81,7 +83,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
81
83
  t.current && clearTimeout(t.current), t.current = setTimeout(() => {
82
84
  z.current && !z.current.contains(a.relatedTarget) && N(!1);
83
85
  }, 200);
84
- }, ee = /* @__PURE__ */ l(
86
+ }, ee = /* @__PURE__ */ o(
85
87
  "div",
86
88
  {
87
89
  ref: z,
@@ -91,20 +93,20 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
91
93
  },
92
94
  onMouseLeave: (a) => H(a),
93
95
  children: [
94
- /* @__PURE__ */ l("div", { className: "flex flex-col gap-1 items-center p-5", children: [
95
- /* @__PURE__ */ l("div", { className: o("relative", M[w]), children: [
96
+ /* @__PURE__ */ o("div", { className: "flex flex-col gap-1 items-center p-5", children: [
97
+ /* @__PURE__ */ o("div", { className: l("relative", M[w]), children: [
96
98
  x && T ? /* @__PURE__ */ e(
97
99
  "img",
98
100
  {
99
101
  src: x,
100
102
  alt: "Profile",
101
- className: o("rounded-full border-2 object-cover w-full h-full", b),
103
+ className: l("rounded-full border-2 object-cover w-full h-full", b),
102
104
  onError: () => s(!1)
103
105
  }
104
106
  ) : /* @__PURE__ */ e(
105
107
  "div",
106
108
  {
107
- className: o(
109
+ className: l(
108
110
  "bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full",
109
111
  b
110
112
  ),
@@ -114,7 +116,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
114
116
  size: "large",
115
117
  variant: "semibold",
116
118
  appearance: "custom",
117
- className: o("text-primary-600", $[w]),
119
+ className: l("text-primary-600", $[w]),
118
120
  children: A((d || "") + " " + (i || ""))
119
121
  }
120
122
  )
@@ -123,7 +125,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
123
125
  h && /* @__PURE__ */ e(
124
126
  "div",
125
127
  {
126
- className: o(
128
+ className: l(
127
129
  "absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",
128
130
  V[w],
129
131
  h
@@ -131,8 +133,8 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
131
133
  }
132
134
  )
133
135
  ] }),
134
- /* @__PURE__ */ l("div", { className: "flex flex-row gap-1 items-center justify-center", children: [
135
- /* @__PURE__ */ l(n, { size: "medium", variant: "semibold", className: "w-full text-center", children: [
136
+ /* @__PURE__ */ o("div", { className: "flex flex-row gap-1 items-center justify-center", children: [
137
+ /* @__PURE__ */ o(n, { size: "medium", variant: "semibold", className: "w-full text-center", children: [
136
138
  d || "",
137
139
  " ",
138
140
  i || ""
@@ -141,9 +143,9 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
141
143
  ] }),
142
144
  /* @__PURE__ */ e(n, { size: "small", variant: "medium", appearance: "body", children: G || r?.email || "" })
143
145
  ] }),
144
- L ? /* @__PURE__ */ e("div", { className: "px-5 pb-3", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]", children: [
146
+ L ? /* @__PURE__ */ e("div", { className: "px-5 pb-3", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]", children: [
145
147
  /* @__PURE__ */ e("div", { className: "flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950", children: /* @__PURE__ */ e(re, { sx: { width: 13, height: 13 }, className: "text-primary-600 dark:text-primary-500" }) }),
146
- /* @__PURE__ */ l("div", { className: "flex flex-col min-w-0", children: [
148
+ /* @__PURE__ */ o("div", { className: "flex flex-col min-w-0", children: [
147
149
  /* @__PURE__ */ e(
148
150
  n,
149
151
  {
@@ -157,7 +159,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
157
159
  /* @__PURE__ */ e(n, { size: "extra-small", variant: "semibold", className: "truncate", children: L })
158
160
  ] })
159
161
  ] }) }) : null,
160
- R && (K ? /* @__PURE__ */ e("div", { className: "p-5", children: /* @__PURE__ */ e(le, {}) }) : R && (r?.teams || r?.clearanceLevel || r?.group) ? /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg", children: [
162
+ R && (K ? /* @__PURE__ */ e("div", { className: "p-5", children: /* @__PURE__ */ e(le, {}) }) : R && (r?.teams || r?.clearanceLevel || r?.group) ? /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg", children: [
161
163
  /* @__PURE__ */ e(de, { isActive: u, lastViewedOn: m }),
162
164
  r.username && /* @__PURE__ */ e(
163
165
  k,
@@ -170,7 +172,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
170
172
  k,
171
173
  {
172
174
  label: "Team",
173
- content: /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
175
+ content: /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
174
176
  r?.teams?.length > 0 && /* @__PURE__ */ e(
175
177
  p,
176
178
  {
@@ -181,7 +183,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
181
183
  },
182
184
  r?.teams[0]?.id
183
185
  ),
184
- r?.teams?.length >= 2 && /* @__PURE__ */ l(
186
+ r?.teams?.length >= 2 && /* @__PURE__ */ o(
185
187
  "div",
186
188
  {
187
189
  ref: Z,
@@ -195,7 +197,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
195
197
  "div",
196
198
  {
197
199
  ref: _,
198
- className: o(
200
+ className: l(
199
201
  "absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60",
200
202
  {
201
203
  "top-full": g.vertical === "bottom",
@@ -238,7 +240,7 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
238
240
  )
239
241
  }
240
242
  )
241
- ] }) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg", children: /* @__PURE__ */ l(n, { className: "flex items-center justify-center gap-1", size: "extra-small", variant: "medium", appearance: "body", children: [
243
+ ] }) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg", children: /* @__PURE__ */ o(n, { className: "flex items-center justify-center gap-1", size: "extra-small", variant: "medium", appearance: "body", children: [
242
244
  /* @__PURE__ */ e(
243
245
  ae,
244
246
  {
@@ -254,27 +256,27 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
254
256
  ]
255
257
  }
256
258
  ), U = v(null);
257
- return /* @__PURE__ */ l(
259
+ return /* @__PURE__ */ o(
258
260
  "div",
259
261
  {
260
262
  onMouseEnter: D,
261
263
  onMouseLeave: H,
262
- className: o("inline-block relative cursor-pointer", q),
264
+ className: l("inline-block relative cursor-pointer", q),
263
265
  ref: U,
264
266
  children: [
265
- /* @__PURE__ */ l("div", { className: o("relative", P || Y), children: [
267
+ /* @__PURE__ */ o("div", { className: l("relative", P || Y), children: [
266
268
  x && T ? /* @__PURE__ */ e(
267
269
  "img",
268
270
  {
269
271
  src: x,
270
272
  alt: "Profile",
271
- className: o("rounded-full border object-cover w-full h-full", b),
273
+ className: l("rounded-full border object-cover w-full h-full", b),
272
274
  onError: () => s(!1)
273
275
  }
274
- ) : d === "All" && i === "Users" ? /* @__PURE__ */ e("div", { className: o("rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center"), children: /* @__PURE__ */ e(se, { className: "text-primary-600 dark:text-primary-600 w-md h-md" }) }) : d && i ? /* @__PURE__ */ e(
276
+ ) : d && i ? /* @__PURE__ */ e(
275
277
  "div",
276
278
  {
277
- className: o(
279
+ className: l(
278
280
  "bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700",
279
281
  M[y],
280
282
  b
@@ -285,16 +287,16 @@ const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "f
285
287
  size: "extra-small",
286
288
  variant: "semibold",
287
289
  appearance: "custom",
288
- className: o("text-primary-600", $[y]),
290
+ className: l("text-primary-600", $[y]),
289
291
  children: A((d || "") + " " + (i || ""))
290
292
  }
291
293
  )
292
294
  }
293
- ) : /* @__PURE__ */ e("div", { className: o(b, "p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"), children: /* @__PURE__ */ e(ie, { fill: "#98A2B3" }) }),
295
+ ) : /* @__PURE__ */ e("div", { className: l(b, "p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"), children: /* @__PURE__ */ e(ie, { fill: "#98A2B3" }) }),
294
296
  J && h && /* @__PURE__ */ e(
295
297
  "div",
296
298
  {
297
- className: o(
299
+ className: l(
298
300
  "absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2",
299
301
  h
300
302
  )
package/dist/components/user-avatar/UserAvatar.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials, initialsFontSizeClasses } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\nimport { GroupsIcon } from '../icon';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number | string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n userDetails?: UserDetails | null;\n /** Whether user details are being fetched */\n isFetchingUserDetails?: boolean;\n /** Optional token for authenticated image loading */\n authToken?: string;\n /** Callback triggered when mouse enters the avatar */\n onHover?: () => void;\n /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n // if (firstName === 'All' && lastName === 'Users') {\n // return (\n // <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n // <GroupsIcon className='text-primary-600 dark:text-primary-600 w-xs h-xs' />\n // </div>\n // );\n // }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive || !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const popperRef = useRef<HTMLDivElement | null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n <Typography\n size='large'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[hoverSize])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName || ''} {lastName || ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email || userDetails?.email || ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color || '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id || index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName || avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName === 'All' && lastName === 'Users' ? (\n <div className={cn('rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center')}>\n <GroupsIcon className='text-primary-600 dark:text-primary-600 w-md h-md' />\n </div>\n ) :\n firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700',\n sizeClasses[size],\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[size])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","initialsFontSizeClasses","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","GroupsIcon","PersonIcon","UserAvatarPopper"],"mappings":"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"}
1
+ {"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials, initialsFontSizeClasses } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\nimport { GroupsIcon } from '../icon';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number | string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n userDetails?: UserDetails | null;\n /** Whether user details are being fetched */\n isFetchingUserDetails?: boolean;\n /** Optional token for authenticated image loading */\n authToken?: string;\n /** Callback triggered when mouse enters the avatar */\n onHover?: () => void;\n /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsIcon className='text-primary-600 dark:text-primary-600 w-4 h-4' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive || !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const popperRef = useRef<HTMLDivElement | null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n <Typography\n size='large'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[hoverSize])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName || ''} {lastName || ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email || userDetails?.email || ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color || '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id || index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName || avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) :\n firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700',\n sizeClasses[size],\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[size])}\n >\n {getInitials((firstName || '') + ' ' + (lastName || ''))}\n </Typography>\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsIcon","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","initialsFontSizeClasses","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
package/dist/components/user-avatar/constants.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={"2xs":"w-3 h-3 text-5xs font-semibold",xs:"w-5 h-5 text-4xs font-semibold",sm:"w-6 h-6 text-2xs font-semibold",md:"w-9 h-9 text-sm font-semibold",lg:"w-12 h-12 text-lg font-semibold",xl:"w-16 h-16 text-2xl font-semibold"},i={"2xs":"text-5xs",xs:"!text-2xs",sm:"!text-2xs",md:"!text-sm",lg:"!text-lg",xl:"!text-2xl"},l=s=>{if(!s)return"";const t=s?.split(" ");return t?.length===1?t[0]?.charAt(0)?.toUpperCase():t[0]?.charAt(0)?.toUpperCase()+t[t?.length-1]?.charAt(0)?.toUpperCase()};exports.getInitials=l;exports.initialsFontSizeClasses=i;exports.sizeClasses=e;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={"2xs":"w-3 h-3 text-5xs font-semibold",xs:"w-5 h-5 text-4xs font-semibold",sm:"w-6 h-6 text-2xs font-semibold",md:"w-9 h-9 text-sm font-semibold",lg:"w-12 h-12 text-lg font-semibold",xl:"w-16 h-16 text-2xl font-semibold"},i={"2xs":"text-5xs",xs:"!text-3xs",sm:"!text-2xs",md:"!text-sm",lg:"!text-lg",xl:"!text-2xl"},l=s=>{if(!s)return"";const t=s?.split(" ");return t?.length===1?t[0]?.charAt(0)?.toUpperCase():t[0]?.charAt(0)?.toUpperCase()+t[t?.length-1]?.charAt(0)?.toUpperCase()};exports.getInitials=l;exports.initialsFontSizeClasses=i;exports.sizeClasses=e;
2
2
  //# sourceMappingURL=constants.cjs.js.map
package/dist/components/user-avatar/constants.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.cjs.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '2xs': 'text-5xs',\n xs: '!text-2xs',\n sm: '!text-2xs',\n md: '!text-sm',\n lg: '!text-lg',\n xl: '!text-2xl',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","initialsFontSizeClasses","getInitials","name","nameArray"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,iCACP,GAAI,iCACJ,GAAI,iCACJ,GAAI,gCACJ,GAAI,kCACJ,GAAI,kCACN,EAGaC,EAAoE,CAC/E,MAAO,WACP,GAAI,YACJ,GAAI,YACJ,GAAI,WACJ,GAAI,WACJ,GAAI,WACN,EAEaC,EAAeC,GAAiB,CAC3C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAYD,GAAM,MAAM,GAAG,EAMjC,OAJEC,GAAW,SAAW,EAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAUA,GAAW,OAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,CAErD"}
1
+ {"version":3,"file":"constants.cjs.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '2xs': 'text-5xs',\n xs: '!text-3xs',\n sm: '!text-2xs',\n md: '!text-sm',\n lg: '!text-lg',\n xl: '!text-2xl',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","initialsFontSizeClasses","getInitials","name","nameArray"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,iCACP,GAAI,iCACJ,GAAI,iCACJ,GAAI,gCACJ,GAAI,kCACJ,GAAI,kCACN,EAGaC,EAAoE,CAC/E,MAAO,WACP,GAAI,YACJ,GAAI,YACJ,GAAI,WACJ,GAAI,WACJ,GAAI,WACN,EAEaC,EAAeC,GAAiB,CAC3C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAYD,GAAM,MAAM,GAAG,EAMjC,OAJEC,GAAW,SAAW,EAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAUA,GAAW,OAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,CAErD"}
package/dist/components/user-avatar/constants.es.js CHANGED
@@ -7,7 +7,7 @@ const x = {
7
7
  xl: "w-16 h-16 text-2xl font-semibold"
8
8
  }, l = {
9
9
  "2xs": "text-5xs",
10
- xs: "!text-2xs",
10
+ xs: "!text-3xs",
11
11
  sm: "!text-2xs",
12
12
  md: "!text-sm",
13
13
  lg: "!text-lg",
package/dist/components/user-avatar/constants.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.es.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '2xs': 'text-5xs',\n xs: '!text-2xs',\n sm: '!text-2xs',\n md: '!text-sm',\n lg: '!text-lg',\n xl: '!text-2xl',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","initialsFontSizeClasses","getInitials","name","nameArray"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAGaC,IAAoE;AAAA,EAC/E,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAc,CAACC,MAAiB;AAC3C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAYD,GAAM,MAAM,GAAG;AAMjC,SAJEC,GAAW,WAAW,IAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAUA,GAAW,SAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA;AAErD;"}
1
+ {"version":3,"file":"constants.es.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '2xs': 'text-5xs',\n xs: '!text-3xs',\n sm: '!text-2xs',\n md: '!text-sm',\n lg: '!text-lg',\n xl: '!text-2xl',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","initialsFontSizeClasses","getInitials","name","nameArray"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAGaC,IAAoE;AAAA,EAC/E,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAc,CAACC,MAAiB;AAC3C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAYD,GAAM,MAAM,GAAG;AAMjC,SAJEC,GAAW,WAAW,IAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAUA,GAAW,SAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA;AAErD;"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lax-wp/design-system",
3
3
  "private": false,
4
- "version": "0.13.61",
4
+ "version": "0.13.63",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.es.js",