@fluentui/react-avatar 9.3.6 → 9.4.0

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 (80) hide show
  1. package/CHANGELOG.json +87 -1
  2. package/CHANGELOG.md +28 -2
  3. package/lib/components/Avatar/Avatar.js +5 -0
  4. package/lib/components/Avatar/Avatar.js.map +1 -1
  5. package/lib/components/Avatar/renderAvatar.js.map +1 -1
  6. package/lib/components/Avatar/useAvatar.js.map +1 -1
  7. package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
  8. package/lib/components/AvatarGroup/AvatarGroup.js +5 -0
  9. package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
  10. package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
  11. package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
  12. package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
  13. package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
  14. package/lib/components/AvatarGroupItem/AvatarGroupItem.js +5 -0
  15. package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
  16. package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
  17. package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
  18. package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
  19. package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +5 -0
  20. package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
  21. package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
  22. package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
  23. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
  24. package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
  25. package/lib/contexts/AvatarContext.js.map +1 -1
  26. package/lib/contexts/AvatarGroupContext.js.map +1 -1
  27. package/lib/index.js.map +1 -1
  28. package/lib/utils/getInitials.js.map +1 -1
  29. package/lib/utils/partitionAvatarGroupItems.js.map +1 -1
  30. package/lib-amd/components/Avatar/Avatar.js +3 -1
  31. package/lib-amd/components/Avatar/Avatar.js.map +1 -1
  32. package/lib-amd/components/AvatarGroup/AvatarGroup.js +3 -1
  33. package/lib-amd/components/AvatarGroup/AvatarGroup.js.map +1 -1
  34. package/lib-amd/components/AvatarGroupItem/AvatarGroupItem.js +3 -1
  35. package/lib-amd/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
  36. package/lib-amd/components/AvatarGroupPopover/AvatarGroupPopover.js +3 -1
  37. package/lib-amd/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
  38. package/lib-amd/utils/getInitials.js.map +1 -1
  39. package/lib-commonjs/Avatar.js.map +1 -1
  40. package/lib-commonjs/AvatarGroup.js.map +1 -1
  41. package/lib-commonjs/AvatarGroupItem.js.map +1 -1
  42. package/lib-commonjs/AvatarGroupPopover.js.map +1 -1
  43. package/lib-commonjs/components/Avatar/Avatar.js +5 -0
  44. package/lib-commonjs/components/Avatar/Avatar.js.map +1 -1
  45. package/lib-commonjs/components/Avatar/Avatar.types.js.map +1 -1
  46. package/lib-commonjs/components/Avatar/index.js.map +1 -1
  47. package/lib-commonjs/components/Avatar/renderAvatar.js.map +1 -1
  48. package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
  49. package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
  50. package/lib-commonjs/components/AvatarGroup/AvatarGroup.js +5 -0
  51. package/lib-commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
  52. package/lib-commonjs/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
  53. package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
  54. package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
  55. package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
  56. package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
  57. package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
  58. package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js +5 -0
  59. package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
  60. package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
  61. package/lib-commonjs/components/AvatarGroupItem/index.js.map +1 -1
  62. package/lib-commonjs/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
  63. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
  64. package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
  65. package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js +5 -0
  66. package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
  67. package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
  68. package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -1
  69. package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
  70. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
  71. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
  72. package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
  73. package/lib-commonjs/contexts/AvatarContext.js.map +1 -1
  74. package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
  75. package/lib-commonjs/contexts/index.js.map +1 -1
  76. package/lib-commonjs/index.js.map +1 -1
  77. package/lib-commonjs/utils/getInitials.js.map +1 -1
  78. package/lib-commonjs/utils/index.js.map +1 -1
  79. package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -1
  80. package/package.json +8 -8
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["exports","active","inactive","useAvatar_unstable","props","ref","dir","react_shared_contexts_1","size","contextSize","AvatarContext_1","name","shape","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","react_utilities_1","root","role","id","imageHidden","setImageHidden","React","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","index_1","firstInitialOnly","icon","react_icons_1","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","react_badge_1","str","hashCode","len","ch","charCodeAt","shift"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n active: 'active',\n inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { size: contextSize } = useAvatarContext();\n const {\n name,\n size = contextSize ?? (32 as const),\n shape = 'circular',\n active = 'unset',\n activeAppearance = 'ring',\n idForColor,\n } = props;\n let { color = 'neutral' } = props;\n\n // Resolve 'colorful' to a specific color name\n if (color === 'colorful') {\n color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n }\n\n const baseId = useId('avatar-');\n\n const root: AvatarState['root'] = getNativeElementProps(\n 'span',\n {\n role: 'img',\n id: baseId,\n // aria-label and/or aria-labelledby are resolved below\n ...props,\n ref,\n },\n /* excludedPropNames: */ ['name'],\n );\n\n const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n const image: AvatarState['image'] = resolveShorthand(props.image, {\n defaultProps: {\n alt: '',\n role: 'presentation',\n 'aria-hidden': true,\n hidden: imageHidden,\n },\n });\n\n // Hide the image if it fails to load and restore it on a successful load\n if (image) {\n image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n }\n\n // Resolve the initials slot, defaulted to getInitials.\n let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n required: true,\n defaultProps: {\n children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\n },\n });\n\n // Don't render the initials slot if it's empty\n if (!initials?.children) {\n initials = undefined;\n }\n\n // Render the icon slot *only if* there aren't any initials or image to display\n let icon: AvatarState['icon'] = undefined;\n if (!initials && (!image || imageHidden)) {\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n },\n });\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n id: baseId + '__badge',\n },\n });\n\n let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n // Resolve aria-label and/or aria-labelledby if not provided by the user\n if (!root['aria-label'] && !root['aria-labelledby']) {\n if (name) {\n root['aria-label'] = name;\n\n // Include the badge in labelledby if it exists\n if (badge) {\n root['aria-labelledby'] = root.id + ' ' + badge.id;\n }\n } else if (initials) {\n // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n }\n\n // Add the active state to the aria label\n if (active === 'active' || active === 'inactive') {\n const activeText = DEFAULT_STRINGS[active];\n if (root['aria-labelledby']) {\n // If using aria-labelledby, render a hidden span and append it to the labelledby\n const activeId = baseId + '__active';\n root['aria-labelledby'] += ' ' + activeId;\n activeAriaLabelElement = (\n <span hidden id={activeId}>\n {activeText}\n </span>\n );\n } else if (root['aria-label']) {\n // Otherwise, just append it to the aria-label\n root['aria-label'] += ' ' + activeText;\n }\n }\n }\n\n return {\n size,\n shape,\n active,\n activeAppearance,\n activeAriaLabelElement,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"]}
1
+ {"version":3,"names":["React","require","react_utilities_1","index_1","react_icons_1","react_badge_1","react_shared_contexts_1","AvatarContext_1","exports","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","useFluent_unstable","size","contextSize","useAvatarContext","name","shape","activeAppearance","idForColor","color","avatarColors","getHashCode","_a","length","baseId","useId","root","getNativeElementProps","role","id","imageHidden","setImageHidden","useState","undefined","image","resolveShorthand","defaultProps","alt","hidden","onError","mergeCallbacks","onLoad","initials","required","children","getInitials","firstInitialOnly","icon","createElement","PersonRegular","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","PresenceBadge","str","hashCode","len","ch","charCodeAt","shift"],"sources":["../src/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n active: 'active',\n inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { size: contextSize } = useAvatarContext();\n const {\n name,\n size = contextSize ?? (32 as const),\n shape = 'circular',\n active = 'unset',\n activeAppearance = 'ring',\n idForColor,\n } = props;\n let { color = 'neutral' } = props;\n\n // Resolve 'colorful' to a specific color name\n if (color === 'colorful') {\n color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n }\n\n const baseId = useId('avatar-');\n\n const root: AvatarState['root'] = getNativeElementProps(\n 'span',\n {\n role: 'img',\n id: baseId,\n // aria-label and/or aria-labelledby are resolved below\n ...props,\n ref,\n },\n /* excludedPropNames: */ ['name'],\n );\n\n const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n const image: AvatarState['image'] = resolveShorthand(props.image, {\n defaultProps: {\n alt: '',\n role: 'presentation',\n 'aria-hidden': true,\n hidden: imageHidden,\n },\n });\n\n // Hide the image if it fails to load and restore it on a successful load\n if (image) {\n image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n }\n\n // Resolve the initials slot, defaulted to getInitials.\n let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n required: true,\n defaultProps: {\n children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\n },\n });\n\n // Don't render the initials slot if it's empty\n if (!initials?.children) {\n initials = undefined;\n }\n\n // Render the icon slot *only if* there aren't any initials or image to display\n let icon: AvatarState['icon'] = undefined;\n if (!initials && (!image || imageHidden)) {\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n },\n });\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n id: baseId + '__badge',\n },\n });\n\n let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n // Resolve aria-label and/or aria-labelledby if not provided by the user\n if (!root['aria-label'] && !root['aria-labelledby']) {\n if (name) {\n root['aria-label'] = name;\n\n // Include the badge in labelledby if it exists\n if (badge) {\n root['aria-labelledby'] = root.id + ' ' + badge.id;\n }\n } else if (initials) {\n // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n }\n\n // Add the active state to the aria label\n if (active === 'active' || active === 'inactive') {\n const activeText = DEFAULT_STRINGS[active];\n if (root['aria-labelledby']) {\n // If using aria-labelledby, render a hidden span and append it to the labelledby\n const activeId = baseId + '__active';\n root['aria-labelledby'] += ' ' + activeId;\n activeAriaLabelElement = (\n <span hidden id={activeId}>\n {activeText}\n </span>\n );\n } else if (root['aria-label']) {\n // Otherwise, just append it to the aria-label\n root['aria-label'] += ' ' + activeText;\n }\n }\n }\n\n return {\n size,\n shape,\n active,\n activeAppearance,\n activeAriaLabelElement,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["exports","root","image","initials","icon","badge","animations","fastOutSlowInMax","react_theme_1","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useRootClassName","react_1","useImageClassName","useIconInitialsClassName","useStyles","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n // Default text size included in useRootClassName\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle3);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"names":["react_1","require","react_theme_1","exports","avatarClassNames","root","image","initials","icon","badge","animations","fastOutSlowInMax","tokens","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useRootClassName","__resetStyles","useImageClassName","useIconInitialsClassName","useStyles","__styles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Cwk7ip","Hwfdqs","Ftih45","Brfgrao","Bciustq","Fbdkly","lawp4y","mdwyqc","Budzafs","r59vdv","n07z76","ck0cow","B8bqphf","h7gv66","Bvy8d8o","B1pumaf","B17wnbm","ring","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","ringThick","qehafq","Bicfajf","susq4k","Biibvgv","B0qfbqy","B4f6apu","y0oebl","uvfttm","ringThicker","ringThickest","shadow4","h8m2vh","shadow8","shadow16","shadow28","inactive","abs64n","Bwz0kr7","vz82u","qhf8xq","B5kzvoi","j35jbq","E5pizo","badgeLarge","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","Bic5iru","brand","cranberry","red","pumpkin","peach","marigold","gold","brass","brown","forest","seafoam","teal","steel","blue","cornflower","navy","lavender","purple","grape","lilac","pink","magenta","plum","beige","mink","platinum","anchor","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","className","mergeClasses","iconSizeClass"],"sources":["../src/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n // Default text size included in useRootClassName\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle3);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
@@ -8,6 +8,7 @@ const React = /*#__PURE__*/require("react");
8
8
  const renderAvatarGroup_1 = /*#__PURE__*/require("./renderAvatarGroup");
9
9
  const useAvatarGroup_1 = /*#__PURE__*/require("./useAvatarGroup");
10
10
  const useAvatarGroupContextValues_1 = /*#__PURE__*/require("./useAvatarGroupContextValues");
11
+ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
11
12
  const useAvatarGroupStyles_1 = /*#__PURE__*/require("./useAvatarGroupStyles");
12
13
  /**
13
14
  * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
@@ -17,6 +18,10 @@ exports.AvatarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
17
18
  const state = useAvatarGroup_1.useAvatarGroup_unstable(props, ref);
18
19
  const contextValues = useAvatarGroupContextValues_1.useAvatarGroupContextValues(state);
19
20
  useAvatarGroupStyles_1.useAvatarGroupStyles_unstable(state);
21
+ const {
22
+ useAvatarGroupStyles_unstable: useCustomStyles
23
+ } = react_shared_contexts_1.useCustomStyleHooks_unstable();
24
+ useCustomStyles(state);
20
25
  return renderAvatarGroup_1.renderAvatarGroup_unstable(state, contextValues);
21
26
  });
22
27
  exports.AvatarGroup.displayName = 'AvatarGroup';
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;;;;AAIaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACjD,MAAMG,aAAa,GAAGC,yDAA2B,CAACH,KAAK,CAAC;EAExDI,oDAA6B,CAACJ,KAAK,CAAC;EACpC,OAAOK,8CAA0B,CAACL,KAAK,EAAEE,aAAa,CAAC;AACzD,CAAC,CAAC;AAEFP,mBAAW,CAACW,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useAvatarGroup_1","contextValues","useAvatarGroupContextValues_1","useAvatarGroupStyles_1","renderAvatarGroup_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroup_unstable(props, ref);\n const contextValues = useAvatarGroupContextValues(state);\n\n useAvatarGroupStyles_unstable(state);\n return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"]}
1
+ {"version":3,"names":["React","require","renderAvatarGroup_1","useAvatarGroup_1","useAvatarGroupContextValues_1","react_shared_contexts_1","useAvatarGroupStyles_1","exports","AvatarGroup","forwardRef","props","ref","state","useAvatarGroup_unstable","contextValues","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderAvatarGroup_unstable","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroup_unstable(props, ref);\n const contextValues = useAvatarGroupContextValues(state);\n\n useAvatarGroupStyles_unstable(state);\n\n const { useAvatarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,mBAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,6BAAA,gBAAAH,OAAA;AACA,MAAAI,uBAAA,gBAAAJ,OAAA;AACA,MAAAK,sBAAA,gBAAAL,OAAA;AAIA;;;;AAIaM,OAAA,CAAAC,WAAW,gBAA0CR,KAAK,CAACS,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGT,gBAAA,CAAAU,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACjD,MAAMG,aAAa,GAAGV,6BAAA,CAAAW,2BAA2B,CAACH,KAAK,CAAC;EAExDN,sBAAA,CAAAU,6BAA6B,CAACJ,KAAK,CAAC;EAEpC,MAAM;IAAEI,6BAA6B,EAAEC;EAAe,CAAE,GAAGZ,uBAAA,CAAAa,4BAA4B,EAAE;EACzFD,eAAe,CAACL,KAAK,CAAC;EAEtB,OAAOV,mBAAA,CAAAiB,0BAA0B,CAACP,KAAK,EAAEE,aAAa,CAAC;AACzD,CAAC,CAAC;AAEFP,OAAA,CAAAC,WAAW,CAACY,WAAW,GAAG,aAAa"}
@@ -1 +1 @@
1
- {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
1
+ {"version":3,"names":[],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts"],"sourcesContent":["import type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n /**\n * Layout the AvatarGroupItems should be displayed as.\n * @default spread\n */\n layout?: 'spread' | 'stack' | 'pie';\n\n /**\n * Size of the AvatarGroupItems.\n * @default 32\n */\n size?: AvatarSize;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n avatarGroup: AvatarGroupContextValue;\n};\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/index.ts"],"sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles';\nexport * from './useAvatarGroupContextValues';\n"]}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/index.ts"],"sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles';\nexport * from './useAvatarGroupContextValues';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mCAAAC,OAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAG,CAACC,KAAuB,EAAEC,aAAuC,KAAI;EAC7G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBJ,KAAK,CAAC;EAE9D,OACEK,oBAACC,wCAAmB;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAW,GACnDH,oBAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACd;AAE1B,CAAC;AARYC,kCAA0B","names":["renderAvatarGroup_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","AvatarGroupContext_1","value","avatarGroup","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.root {...slotProps.root} />\n </AvatarGroupProvider>\n );\n};\n"]}
1
+ {"version":3,"names":["React","require","react_utilities_1","AvatarGroupContext_1","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","getSlots","createElement","AvatarGroupProvider","value","avatarGroup","root","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.root {...slotProps.root} />\n </AvatarGroupProvider>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,oBAAA,gBAAAF,OAAA;AAGA;;;AAGO,MAAMG,0BAA0B,GAAGA,CAACC,KAAuB,EAAEC,aAAuC,KAAI;EAC7G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,iBAAA,CAAAO,QAAQ,CAAmBJ,KAAK,CAAC;EAE9D,OACEL,KAAA,CAAAU,aAAA,CAACP,oBAAA,CAAAQ,mBAAmB;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAW,GACnDb,KAAA,CAAAU,aAAA,CAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACd;AAE1B,CAAC;AARYC,OAAA,CAAAX,0BAA0B,GAAAA,0BAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC,MAAM,GAAG,QAAQ;IAAEC,IAAI,GAAGC;EAAsB,CAAE,GAAGJ,KAAK;EAElE,MAAMK,IAAI,GAAGC,uCAAqB,CAChC,KAAK,EACL;IACEC,IAAI,EAAE,OAAO;IACb,GAAGP,KAAK;IACRC;GACD,EACD,CAAC,MAAM,CAAC,CACT;EAED,OAAO;IACLC,MAAM;IACNC,IAAI;IACJK,UAAU,EAAE;MACVH,IAAI,EAAE;KACP;IACDA;GACD;AACH,CAAC;AArBYD,+BAAuB;AAuBvBA,8BAAsB,GAAG,EAAE","names":["useAvatarGroup_unstable","props","ref","layout","size","exports","root","react_utilities_1","role","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n },\n ['size'],\n );\n\n return {\n layout,\n size,\n components: {\n root: 'div',\n },\n root,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"]}
1
+ {"version":3,"names":["react_utilities_1","require","useAvatarGroup_unstable","props","ref","layout","size","exports","defaultAvatarGroupSize","root","getNativeElementProps","role","components"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n },\n ['size'],\n );\n\n return {\n layout,\n size,\n components: {\n root: 'div',\n },\n root,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAGA;;;;;;;;;AASO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC,MAAM,GAAG,QAAQ;IAAEC,IAAI,GAAGC,OAAA,CAAAC;EAAsB,CAAE,GAAGL,KAAK;EAElE,MAAMM,IAAI,GAAGT,iBAAA,CAAAU,qBAAqB,CAChC,KAAK,EACL;IACEC,IAAI,EAAE,OAAO;IACb,GAAGR,KAAK;IACRC;GACD,EACD,CAAC,MAAM,CAAC,CACT;EAED,OAAO;IACLC,MAAM;IACNC,IAAI;IACJM,UAAU,EAAE;MACVH,IAAI,EAAE;KACP;IACDA;GACD;AACH,CAAC;AArBYF,OAAA,CAAAL,uBAAuB,GAAAA,uBAAA;AAuBvBK,OAAA,CAAAC,sBAAsB,GAAG,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAEO,MAAMA,2BAA2B,GAAIC,KAAuB,IAA8B;EAC/F,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAE9B,MAAMG,WAAW,GAA4B;IAC3CF,MAAM;IACNC;GACD;EAED,OAAO;IAAEC;EAAW,CAAE;AACxB,CAAC;AATYC,mCAA2B","names":["useAvatarGroupContextValues","state","layout","size","avatarGroup","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n const { layout, size } = state;\n\n const avatarGroup: AvatarGroupContextValue = {\n layout,\n size,\n };\n\n return { avatarGroup };\n};\n"]}
1
+ {"version":3,"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n const { layout, size } = state;\n\n const avatarGroup: AvatarGroupContextValue = {\n layout,\n size,\n };\n\n return { avatarGroup };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,2BAA2B,GAAIC,KAAuB,IAA8B;EAC/F,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAE9B,MAAMG,WAAW,GAA4B;IAC3CF,MAAM;IACNC;GACD;EAED,OAAO;IAAEC;EAAW,CAAE;AACxB,CAAC;AATYC,OAAA,CAAAL,2BAA2B,GAAAA,2BAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAY1B;AAEF;;;AAGO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGN,SAAS,EAAE;EAC1B,MAAMO,UAAU,GAAGC,+BAAa,EAAE;EAElCL,KAAK,CAACJ,IAAI,CAACU,SAAS,GAAGR,oBAAY,CACjCH,6BAAqB,CAACC,IAAI,EAC1BO,MAAM,CAACI,IAAI,EACXN,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EACpCD,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACK,GAAG,EAC9BR,KAAK,CAACJ,IAAI,CAACU,SAAS,CACrB;EAED,OAAON,KAAK;AACd,CAAC;AAdYL,qCAA6B","names":["exports","root","useStyles","react_1","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","useAvatarStyles_1","className","base","pie"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.pie,\n state.root.className,\n );\n\n return state;\n};\n"]}
1
+ {"version":3,"names":["react_1","require","react_theme_1","useAvatarStyles_1","exports","avatarGroupClassNames","root","useStyles","__styles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","useSizeStyles","className","mergeClasses"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.pie,\n state.root.className,\n );\n\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGP,OAAA,CAAAQ,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,EAY1B;AAEF;;;AAGO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGf,SAAS,EAAE;EAC1B,MAAMgB,UAAU,GAAGpB,iBAAA,CAAAqB,aAAa,EAAE;EAElCL,KAAK,CAACb,IAAI,CAACmB,SAAS,GAAGzB,OAAA,CAAA0B,YAAY,CACjCtB,OAAA,CAAAC,qBAAqB,CAACC,IAAI,EAC1BgB,MAAM,CAACb,IAAI,EACXW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EACpCD,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAC9BO,KAAK,CAACb,IAAI,CAACmB,SAAS,CACrB;EAED,OAAON,KAAK;AACd,CAAC;AAdYf,OAAA,CAAAc,6BAA6B,GAAAA,6BAAA"}
@@ -7,6 +7,7 @@ exports.AvatarGroupItem = void 0;
7
7
  const React = /*#__PURE__*/require("react");
8
8
  const renderAvatarGroupItem_1 = /*#__PURE__*/require("./renderAvatarGroupItem");
9
9
  const useAvatarGroupItem_1 = /*#__PURE__*/require("./useAvatarGroupItem");
10
+ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
10
11
  const useAvatarGroupItemStyles_1 = /*#__PURE__*/require("./useAvatarGroupItemStyles");
11
12
  /**
12
13
  * The AvatarGroupItem component represents a single person or entity.
@@ -15,6 +16,10 @@ const useAvatarGroupItemStyles_1 = /*#__PURE__*/require("./useAvatarGroupItemSty
15
16
  exports.AvatarGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
16
17
  const state = useAvatarGroupItem_1.useAvatarGroupItem_unstable(props, ref);
17
18
  useAvatarGroupItemStyles_1.useAvatarGroupItemStyles_unstable(state);
19
+ const {
20
+ useAvatarGroupItemStyles_unstable: useCustomStyles
21
+ } = react_shared_contexts_1.useCustomStyleHooks_unstable();
22
+ useCustomStyles(state);
18
23
  return renderAvatarGroupItem_1.renderAvatarGroupItem_unstable(state);
19
24
  });
20
25
  exports.AvatarGroupItem.displayName = 'AvatarGroupItem';
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;;AAIaA,uBAAe,gBAA8CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGC,gDAA2B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAErDG,4DAAiC,CAACF,KAAK,CAAC;EACxC,OAAOG,sDAA8B,CAACH,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFL,uBAAe,CAACS,WAAW,GAAG,iBAAiB","names":["exports","React","forwardRef","props","ref","state","useAvatarGroupItem_1","useAvatarGroupItemStyles_1","renderAvatarGroupItem_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"]}
1
+ {"version":3,"names":["React","require","renderAvatarGroupItem_1","useAvatarGroupItem_1","react_shared_contexts_1","useAvatarGroupItemStyles_1","exports","AvatarGroupItem","forwardRef","props","ref","state","useAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderAvatarGroupItem_unstable","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n const { useAvatarGroupItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AACA,MAAAE,oBAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AACA,MAAAI,0BAAA,gBAAAJ,OAAA;AAIA;;;;AAIaK,OAAA,CAAAC,eAAe,gBAA8CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGR,oBAAA,CAAAS,2BAA2B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAErDL,0BAAA,CAAAQ,iCAAiC,CAACF,KAAK,CAAC;EAExC,MAAM;IAAEE,iCAAiC,EAAEC;EAAe,CAAE,GAAGV,uBAAA,CAAAW,4BAA4B,EAAE;EAC7FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,uBAAA,CAAAc,8BAA8B,CAACL,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFL,OAAA,CAAAC,eAAe,CAACU,WAAW,GAAG,iBAAiB"}
@@ -1 +1 @@
1
- {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
1
+ {"version":3,"names":[],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n root: NonNullable<Slot<'div', 'li'>>;\n\n /**\n * Avatar that represents a person or entity.\n */\n avatar: NonNullable<Slot<typeof Avatar>>;\n\n /**\n * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n * The content of the label, by default, is the `name` prop from the `avatar` slot.\n */\n overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n /**\n * Whether the Avatar is an overflow item.\n *\n * @default false\n */\n isOverflowItem?: boolean;\n\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n};\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"]}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,uBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,6BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,6BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,0BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,EAAI,EACrCN,KAAK,CAACO,cAAc,IAAIH,oBAACH,KAAK,CAACO,aAAa;IAAA,GAAKN,SAAS,CAACM;EAAa,EAAI,CAClE;AAEjB,CAAC;AATYC,sCAA8B","names":["renderAvatarGroupItem_unstable","state","slots","slotProps","react_utilities_1","React","root","avatar","isOverflowItem","overflowLabel","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.avatar {...slotProps.avatar} />\n {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n </slots.root>\n );\n};\n"]}
1
+ {"version":3,"names":["React","require","react_utilities_1","renderAvatarGroupItem_unstable","state","slots","slotProps","getSlots","createElement","root","avatar","isOverflowItem","overflowLabel","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.avatar {...slotProps.avatar} />\n {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n </slots.root>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BT,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,EAAI,EACrCN,KAAK,CAACO,cAAc,IAAIX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,aAAa;IAAA,GAAKN,SAAS,CAACM;EAAa,EAAI,CAClE;AAEjB,CAAC;AATYC,OAAA,CAAAV,8BAA8B,GAAAA,8BAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAMC,eAAe,GAAGC,mDAA8B,CAACC,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC;EAC7E,MAAMC,SAAS,GAAGH,mDAA8B,CAACC,GAAG,IAAIA,GAAG,CAACG,IAAI,CAAC;EACjE,MAAMC,MAAM,GAAGL,mDAA8B,CAACC,GAAG,IAAIA,GAAG,CAACI,MAAM,CAAC;EAChE;EACA,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC;EAAe,CAAE,GAAGX,KAAK;EACtD,MAAMO,IAAI,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIM,uCAAsB;EAChD,MAAMC,qBAAqB,GAAGC,4CAAmB,CAACX,uCAAkB,CAAC;EAErE,IAAIY,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAI,CAACJ,qBAAqB,EAAE;IACnE;IACAK,OAAO,CAACC,IAAI,CAAC,oEAAoE,CAAC;;EAGpF,OAAO;IACLC,cAAc,EAAElB,eAAe;IAC/BM,MAAM;IACND,IAAI;IACJc,UAAU,EAAE;MACVC,IAAI,EAAEpB,eAAe,GAAG,IAAI,GAAG,KAAK;MACpCqB,MAAM,EAAEC,eAAM;MACdC,aAAa,EAAE;KAChB;IACDH,IAAI,EAAEI,kCAAgB,CAAC1B,KAAK,CAACsB,IAAI,EAAE;MACjCK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZnB,KAAK;QACLC;;KAEH,CAAC;IACFa,MAAM,EAAEG,kCAAgB,CAAC1B,KAAK,CAACuB,MAAM,EAAE;MACrCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ3B,GAAG;QACHM,IAAI;QACJsB,KAAK,EAAE,UAAU;QACjB,GAAGlB;;KAEN,CAAC;IACFc,aAAa,EAAEC,kCAAgB,CAAC1B,KAAK,CAACyB,aAAa,EAAE;MACnDE,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ;QACA,aAAa,EAAE,IAAI;QACnBE,QAAQ,EAAE9B,KAAK,CAAC+B;;KAEnB;GACF;AACH,CAAC;AAnDYC,mCAA2B","names":["useAvatarGroupItem_unstable","props","ref","groupIsOverflow","AvatarGroupContext_1","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","useAvatarGroup_1","hasAvatarGroupContext","react_context_selector_1","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","Avatar_1","overflowLabel","react_utilities_1","required","defaultProps","color","children","name","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n props: AvatarGroupItemProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n const { style, className, ...avatarSlotProps } = props;\n const size = groupSize ?? defaultAvatarGroupSize;\n const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n // eslint-disable-next-line no-console\n console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n }\n\n return {\n isOverflowItem: groupIsOverflow,\n layout,\n size,\n components: {\n root: groupIsOverflow ? 'li' : 'div',\n avatar: Avatar,\n overflowLabel: 'span',\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n style,\n className,\n },\n }),\n avatar: resolveShorthand(props.avatar, {\n required: true,\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n }),\n overflowLabel: resolveShorthand(props.overflowLabel, {\n required: true,\n defaultProps: {\n // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n 'aria-hidden': true,\n children: props.name,\n },\n }),\n };\n};\n"]}
1
+ {"version":3,"names":["Avatar_1","require","AvatarGroupContext_1","useAvatarGroup_1","react_utilities_1","react_context_selector_1","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","useAvatarGroupContext_unstable","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","defaultAvatarGroupSize","hasAvatarGroupContext","useHasParentContext","AvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","Avatar","overflowLabel","resolveShorthand","required","defaultProps","color","children","name","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n props: AvatarGroupItemProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n const { style, className, ...avatarSlotProps } = props;\n const size = groupSize ?? defaultAvatarGroupSize;\n const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n // eslint-disable-next-line no-console\n console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n }\n\n return {\n isOverflowItem: groupIsOverflow,\n layout,\n size,\n components: {\n root: groupIsOverflow ? 'li' : 'div',\n avatar: Avatar,\n overflowLabel: 'span',\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n style,\n className,\n },\n }),\n avatar: resolveShorthand(props.avatar, {\n required: true,\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n }),\n overflowLabel: resolveShorthand(props.overflowLabel, {\n required: true,\n defaultProps: {\n // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n 'aria-hidden': true,\n children: props.name,\n },\n }),\n };\n};\n"],"mappings":";;;;;;AACA,MAAAA,QAAA,gBAAAC,OAAA;AACA,MAAAC,oBAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,iBAAA,gBAAAH,OAAA;AACA,MAAAI,wBAAA,gBAAAJ,OAAA;AAGA;;;;;;;;;AASO,MAAMK,2BAA2B,GAAGA,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAMC,eAAe,GAAGP,oBAAA,CAAAQ,8BAA8B,CAACC,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC;EAC7E,MAAMC,SAAS,GAAGX,oBAAA,CAAAQ,8BAA8B,CAACC,GAAG,IAAIA,GAAG,CAACG,IAAI,CAAC;EACjE,MAAMC,MAAM,GAAGb,oBAAA,CAAAQ,8BAA8B,CAACC,GAAG,IAAIA,GAAG,CAACI,MAAM,CAAC;EAChE;EACA,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC;EAAe,CAAE,GAAGX,KAAK;EACtD,MAAMO,IAAI,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIV,gBAAA,CAAAgB,sBAAsB;EAChD,MAAMC,qBAAqB,GAAGf,wBAAA,CAAAgB,mBAAmB,CAACnB,oBAAA,CAAAoB,kBAAkB,CAAC;EAErE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAI,CAACL,qBAAqB,EAAE;IACnE;IACAM,OAAO,CAACC,IAAI,CAAC,oEAAoE,CAAC;;EAGpF,OAAO;IACLC,cAAc,EAAEnB,eAAe;IAC/BM,MAAM;IACND,IAAI;IACJe,UAAU,EAAE;MACVC,IAAI,EAAErB,eAAe,GAAG,IAAI,GAAG,KAAK;MACpCsB,MAAM,EAAE/B,QAAA,CAAAgC,MAAM;MACdC,aAAa,EAAE;KAChB;IACDH,IAAI,EAAE1B,iBAAA,CAAA8B,gBAAgB,CAAC3B,KAAK,CAACuB,IAAI,EAAE;MACjCK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZpB,KAAK;QACLC;;KAEH,CAAC;IACFc,MAAM,EAAE3B,iBAAA,CAAA8B,gBAAgB,CAAC3B,KAAK,CAACwB,MAAM,EAAE;MACrCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ5B,GAAG;QACHM,IAAI;QACJuB,KAAK,EAAE,UAAU;QACjB,GAAGnB;;KAEN,CAAC;IACFe,aAAa,EAAE7B,iBAAA,CAAA8B,gBAAgB,CAAC3B,KAAK,CAAC0B,aAAa,EAAE;MACnDE,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ;QACA,aAAa,EAAE,IAAI;QACnBE,QAAQ,EAAE/B,KAAK,CAACgC;;KAEnB;GACF;AACH,CAAC;AAnDYC,OAAA,CAAAlC,2BAA2B,GAAAA,2BAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["exports","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","react_1","useAvatarStyles","useOverflowLabelStyles","useStackStyles","useSpreadStyles","usePieStyles","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","react_shared_contexts_1","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","Avatar_1","groupChildClassName","rootClasses","base","push","nonOverflowItem","thick","thicker","thickest","slices","rtlSlices","overflowItem","className","pie","useGroupChildClassName","stackStyles","spreadStyles","layoutClasses","xxs","xs","s","l","mNudge","xl"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: {\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n },\n nonOverflowItem: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: {\n ...shorthands.borderRadius(0),\n },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"]}
1
+ {"version":3,"names":["react_1","require","react_theme_1","Avatar_1","react_shared_contexts_1","exports","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","__styles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","z8tnut","z189sj","Byoj8tv","uwmqm3","nonOverflowItem","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","useFluent_unstable","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","useSizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","mergeClasses","stackStyles","spreadStyles","layoutClasses"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: {\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n },\n nonOverflowItem: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: {\n ...shorthands.borderRadius(0),\n },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"],"mappings":"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"}
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.AvatarGroupPopover = void 0;
7
7
  const renderAvatarGroupPopover_1 = /*#__PURE__*/require("./renderAvatarGroupPopover");
8
8
  const useAvatarGroupPopoverContextValues_1 = /*#__PURE__*/require("./useAvatarGroupPopoverContextValues");
9
+ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
9
10
  const useAvatarGroupPopover_1 = /*#__PURE__*/require("./useAvatarGroupPopover");
10
11
  const useAvatarGroupPopoverStyles_1 = /*#__PURE__*/require("./useAvatarGroupPopoverStyles");
11
12
  /**
@@ -15,6 +16,10 @@ const AvatarGroupPopover = props => {
15
16
  const state = useAvatarGroupPopover_1.useAvatarGroupPopover_unstable(props);
16
17
  const contextValues = useAvatarGroupPopoverContextValues_1.useAvatarGroupPopoverContextValues(state);
17
18
  useAvatarGroupPopoverStyles_1.useAvatarGroupPopoverStyles_unstable(state);
19
+ const {
20
+ useAvatarGroupPopoverStyles_unstable: useCustomStyles
21
+ } = react_shared_contexts_1.useCustomStyleHooks_unstable();
22
+ useCustomStyles(state);
18
23
  return renderAvatarGroupPopover_1.renderAvatarGroupPopover_unstable(state, contextValues);
19
24
  };
20
25
  exports.AvatarGroupPopover = AvatarGroupPopover;
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AACA;AACA;AACA;AACA;AAGA;;;AAGO,MAAMA,kBAAkB,GAAsCC,KAAK,IAAG;EAC3E,MAAMC,KAAK,GAAGC,sDAA8B,CAACF,KAAK,CAAC;EACnD,MAAMG,aAAa,GAAGC,uEAAkC,CAACH,KAAK,CAAC;EAE/DI,kEAAoC,CAACJ,KAAK,CAAC;EAC3C,OAAOK,4DAAiC,CAACL,KAAK,EAAEE,aAAa,CAAC;AAChE,CAAC;AANYI,0BAAkB;AAQ/BA,0BAAkB,CAACC,WAAW,GAAG,oBAAoB","names":["AvatarGroupPopover","props","state","useAvatarGroupPopover_1","contextValues","useAvatarGroupPopoverContextValues_1","useAvatarGroupPopoverStyles_1","renderAvatarGroupPopover_1","exports","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"]}
1
+ {"version":3,"names":["renderAvatarGroupPopover_1","require","useAvatarGroupPopoverContextValues_1","react_shared_contexts_1","useAvatarGroupPopover_1","useAvatarGroupPopoverStyles_1","AvatarGroupPopover","props","state","useAvatarGroupPopover_unstable","contextValues","useAvatarGroupPopoverContextValues","useAvatarGroupPopoverStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderAvatarGroupPopover_unstable","exports","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n const { useAvatarGroupPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"mappings":";;;;;;AACA,MAAAA,0BAAA,gBAAAC,OAAA;AACA,MAAAC,oCAAA,gBAAAD,OAAA;AACA,MAAAE,uBAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AACA,MAAAI,6BAAA,gBAAAJ,OAAA;AAGA;;;AAGO,MAAMK,kBAAkB,GAAsCC,KAAK,IAAG;EAC3E,MAAMC,KAAK,GAAGJ,uBAAA,CAAAK,8BAA8B,CAACF,KAAK,CAAC;EACnD,MAAMG,aAAa,GAAGR,oCAAA,CAAAS,kCAAkC,CAACH,KAAK,CAAC;EAE/DH,6BAAA,CAAAO,oCAAoC,CAACJ,KAAK,CAAC;EAE3C,MAAM;IAAEI,oCAAoC,EAAEC;EAAe,CAAE,GAAGV,uBAAA,CAAAW,4BAA4B,EAAE;EAChGD,eAAe,CAACL,KAAK,CAAC;EAEtB,OAAOR,0BAAA,CAAAe,iCAAiC,CAACP,KAAK,EAAEE,aAAa,CAAC;AAChE,CAAC;AAVYM,OAAA,CAAAV,kBAAkB,GAAAA,kBAAA;AAY/BU,OAAA,CAAAV,kBAAkB,CAACW,WAAW,GAAG,oBAAoB"}
@@ -1 +1 @@
1
- {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
1
+ {"version":3,"names":[],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /**\n * Button that triggers the Popover.\n */\n triggerButton: NonNullable<Slot<'button'>>;\n\n /**\n * List that contains the overflowed AvatarGroupItems.\n */\n content: NonNullable<Slot<'ul'>>;\n\n /**\n * PopoverSurface that contains the content.\n */\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /**\n * Tooltip shown when triggerButton is hovered.\n */\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /**\n * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n */\n indicator?: 'count' | 'icon';\n\n /**\n * Number of AvatarGroupItems that will be rendered.\n *\n * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n */\n count?: number;\n\n children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"]}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,0BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,6BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mCAAAC,OAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAIA;;;AAGO,MAAMA,iCAAiC,GAAG,CAC/CC,KAA8B,EAC9BC,aAAuC,KACrC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA0BJ,KAAK,CAAC;EAErE,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAMH,SAAS,CAACG;EAAqB,GAC9CD,oBAACE,8BAAc;IAACC,wBAAwB;EAAA,GACtCH,oBAACH,KAAK,CAACO,OAAO;IAAA,GAAMN,SAAS,CAACM;EAAwB,GACpDJ,oBAACH,KAAK,CAACQ,aAAa;IAAA,GAAKP,SAAS,CAACO;EAAa,EAAI,CACtC,CACD,EACjBL,oBAACH,KAAK,CAACS,cAAc;IAAA,GAAKR,SAAS,CAACQ;EAAc,GAChDN,oBAACO,wCAAmB;IAACC,KAAK,EAAEZ,aAAa,CAACa;EAAW,GACnDT,oBAACH,KAAK,CAACa,OAAO;IAAA,GAAKZ,SAAS,CAACY;EAAO,EAAI,CACpB,CACD,CACZ;AAEjB,CAAC;AApBYC,yCAAiC","names":["renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","root","react_popover_1","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","AvatarGroupContext_1","value","avatarGroup","content","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\n const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <slots.root {...(slotProps.root as PopoverProps)}>\n <PopoverTrigger disableButtonEnhancement>\n <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n <slots.triggerButton {...slotProps.triggerButton} />\n </slots.tooltip>\n </PopoverTrigger>\n <slots.popoverSurface {...slotProps.popoverSurface}>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.content {...slotProps.content} />\n </AvatarGroupProvider>\n </slots.popoverSurface>\n </slots.root>\n );\n};\n"]}
1
+ {"version":3,"names":["React","require","AvatarGroupContext_1","react_utilities_1","react_popover_1","renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","getSlots","createElement","root","PopoverTrigger","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","AvatarGroupProvider","value","avatarGroup","content","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\n const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <slots.root {...(slotProps.root as PopoverProps)}>\n <PopoverTrigger disableButtonEnhancement>\n <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n <slots.triggerButton {...slotProps.triggerButton} />\n </slots.tooltip>\n </PopoverTrigger>\n <slots.popoverSurface {...slotProps.popoverSurface}>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.content {...slotProps.content} />\n </AvatarGroupProvider>\n </slots.popoverSurface>\n </slots.root>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,oBAAA,gBAAAD,OAAA;AAEA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,eAAA,gBAAAH,OAAA;AAIA;;;AAGO,MAAMI,iCAAiC,GAAGA,CAC/CC,KAA8B,EAC9BC,aAAuC,KACrC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,iBAAA,CAAAO,QAAQ,CAA0BJ,KAAK,CAAC;EAErE,OACEN,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAMH,SAAS,CAACG;EAAqB,GAC9CZ,KAAA,CAAAW,aAAA,CAACP,eAAA,CAAAS,cAAc;IAACC,wBAAwB;EAAA,GACtCd,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACO,OAAO;IAAA,GAAMN,SAAS,CAACM;EAAwB,GACpDf,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACQ,aAAa;IAAA,GAAKP,SAAS,CAACO;EAAa,EAAI,CACtC,CACD,EACjBhB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACS,cAAc;IAAA,GAAKR,SAAS,CAACQ;EAAc,GAChDjB,KAAA,CAAAW,aAAA,CAACT,oBAAA,CAAAgB,mBAAmB;IAACC,KAAK,EAAEZ,aAAa,CAACa;EAAW,GACnDpB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACa,OAAO;IAAA,GAAKZ,SAAS,CAACY;EAAO,EAAI,CACpB,CACD,CACZ;AAEjB,CAAC;AApBYC,OAAA,CAAAjB,iCAAiC,GAAAA,iCAAA"}
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;;;;;;;;AAQO,MAAMA,8BAA8B,GAAIC,KAA8B,IAA6B;;EACxG,MAAMC,IAAI,GAAG,yDAA8B,CAACC,GAAG,IAAIA,GAAG,CAACD,IAAI,CAAC,mCAAIE,uCAAsB;EACtF,MAAMC,MAAM,GAAGC,mDAA8B,CAACH,GAAG,IAAIA,GAAG,CAACE,MAAM,CAAC;EAChE,MAAM;IACJE,SAAS,GAAGL,IAAI,GAAG,EAAE,GAAG,MAAM,GAAG,OAAO;IACxCM,KAAK,GAAGC,KAAK,CAACC,QAAQ,CAACF,KAAK,CAACP,KAAK,CAACU,QAAQ,CAAC;IAC5CA,QAAQ;IACR,GAAGC;EAAW,CACf,GAAGX,KAAK;EAET,MAAM,CAACY,WAAW,EAAEC,cAAc,CAAC,GAAGC,sCAAoB,CAAC;IACzDC,KAAK,EAAEf,KAAK,CAACgB,IAAI;IACjBC,YAAY,EAAEjB,KAAK,CAACkB,WAAW;IAC/BC,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,qBAAqB,GAAG,CAACC,CAAoB,EAAEC,IAAsB,KAAI;;IAC7E,iBAAW,CAACC,YAAY,+CAAxBZ,WAAW,EAAgBU,CAAC,EAAEC,IAAI,CAAC;IACnCT,cAAc,CAACS,IAAI,CAACN,IAAI,CAAC;EAC3B,CAAC;EAED,IAAIQ,qBAAqB;EACzB,IAAIpB,MAAM,KAAK,KAAK,EAAE;IACpBoB,qBAAqB,GAAG,IAAI;GAC7B,MAAM,IAAIlB,SAAS,KAAK,MAAM,EAAE;IAC/BkB,qBAAqB,GAAGhB,oBAACiB,mCAAqB,OAAG;GAClD,MAAM;IACLD,qBAAqB,GAAGjB,KAAK,GAAG,EAAE,GAAG,KAAK,GAAG,IAAIA,KAAK,EAAE;;EAG1D,OAAO;IACLA,KAAK;IACLD,SAAS;IACTF,MAAM;IACNQ,WAAW;IACXX,IAAI;IAEJyB,UAAU,EAAE;MACVC,IAAI,EAAEC,uBAAO;MACbC,aAAa,EAAE,QAAQ;MACvBC,OAAO,EAAE,IAAI;MACbC,cAAc,EAAEH,8BAAc;MAC9BI,OAAO,EAAEC;KACV;IACDN,IAAI,EAAE;MACJ;MACAjB,QAAQ,EAAEF,yCAAK;MACfP,IAAI,EAAE,OAAO;MACbiC,SAAS,EAAE,IAAI;MACf,GAAGvB,WAAW;MACdK,IAAI,EAAEJ,WAAW;MACjBW,YAAY,EAAEH;KACf;IACDS,aAAa,EAAEf,kCAAgB,CAACd,KAAK,CAAC6B,aAAa,EAAE;MACnDM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ1B,QAAQ,EAAEc,qBAAqB;QAC/Ba,IAAI,EAAE;;KAET,CAAC;IACFP,OAAO,EAAEhB,kCAAgB,CAACd,KAAK,CAAC8B,OAAO,EAAE;MACvCK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ1B,QAAQ;QACR4B,IAAI,EAAE;;KAET,CAAC;IACFP,cAAc,EAAEjB,kCAAgB,CAACd,KAAK,CAAC+B,cAAc,EAAE;MACrDI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ,YAAY,EAAE,UAAU;QACxBG,QAAQ,EAAE;;KAEb,CAAC;IACFP,OAAO,EAAElB,kCAAgB,CAACd,KAAK,CAACgC,OAAO,EAAE;MACvCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZN,OAAO,EAAE,mBAAmB;QAC5BU,YAAY,EAAE;;KAEjB;GACF;AACH,CAAC;AAlFYC,sCAA8B","names":["useAvatarGroupPopover_unstable","props","size","ctx","useAvatarGroup_1","layout","AvatarGroupContext_1","indicator","count","React","Children","children","restOfProps","popoverOpen","setPopoverOpen","react_utilities_1","state","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","react_icons_1","components","root","react_popover_1","triggerButton","content","popoverSurface","tooltip","react_tooltip_1","trapFocus","required","defaultProps","type","role","tabIndex","relationship","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const {\n indicator = size < 24 ? 'icon' : 'count',\n count = React.Children.count(props.children),\n children,\n ...restOfProps\n } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'icon') {\n triggerButtonChildren = <MoreHorizontalRegular />;\n } else {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n size,\n\n components: {\n root: Popover,\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n triggerButton: resolveShorthand(props.triggerButton, {\n required: true,\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n }),\n content: resolveShorthand(props.content, {\n required: true,\n defaultProps: {\n children,\n role: 'list',\n },\n }),\n popoverSurface: resolveShorthand(props.popoverSurface, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n }),\n tooltip: resolveShorthand(props.tooltip, {\n required: true,\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n }),\n };\n};\n"]}
1
+ {"version":3,"names":["React","require","AvatarGroupContext_1","useAvatarGroup_1","react_utilities_1","react_icons_1","react_popover_1","react_tooltip_1","useAvatarGroupPopover_unstable","props","size","_a","useAvatarGroupContext_unstable","ctx","defaultAvatarGroupSize","layout","indicator","count","Children","children","restOfProps","popoverOpen","setPopoverOpen","useControllableState","state","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","call","triggerButtonChildren","createElement","MoreHorizontalRegular","components","root","Popover","triggerButton","content","popoverSurface","PopoverSurface","tooltip","Tooltip","Fragment","trapFocus","resolveShorthand","required","defaultProps","type","role","tabIndex","relationship","exports"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const {\n indicator = size < 24 ? 'icon' : 'count',\n count = React.Children.count(props.children),\n children,\n ...restOfProps\n } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'icon') {\n triggerButtonChildren = <MoreHorizontalRegular />;\n } else {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n size,\n\n components: {\n root: Popover,\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n triggerButton: resolveShorthand(props.triggerButton, {\n required: true,\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n }),\n content: resolveShorthand(props.content, {\n required: true,\n defaultProps: {\n children,\n role: 'list',\n },\n }),\n popoverSurface: resolveShorthand(props.popoverSurface, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n }),\n tooltip: resolveShorthand(props.tooltip, {\n required: true,\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n }),\n };\n};\n"],"mappings":"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"}