npm - @fluentui/react-avatar - Versions diffs - 9.2.10 → 9.2.11 - Mend

@fluentui/react-avatar 9.2.10 → 9.2.11

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 (115) hide show

package/lib/components/Avatar/useAvatarStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, 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 useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { 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 badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.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 ...shorthands.borderRadius('inherit'),\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 styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, 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 rootClasses.push(styles.textBody1Strong);\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.textTitle);\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, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, 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 styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","avatarClassNames","root","image","initials","icon","badge","animations","fastOutSlowInMax","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useStyles","useSizeStyles","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textBody1Strong","textSubtitle2","textSubtitle1","textTitle","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconInitials","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, 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 useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { 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 badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.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 ...shorthands.borderRadius('inherit'),\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 styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, 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 rootClasses.push(styles.textBody1Strong);\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.textTitle);\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, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, 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 styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}

package/lib/components/AvatarGroup/AvatarGroup.js CHANGED Viewed

@@ -7,7 +7,6 @@ import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';
  * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
  * of individual Avatars in a spread, stack, or pie layout.
  */
 export const AvatarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAvatarGroup_unstable(props, ref);
   const contextValues = useAvatarGroupContextValues(state);

package/lib/components/AvatarGroup/AvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"~~mappings":"AAAA,OAAO,KAAK,~~KAAZ~~,~~MAAuB,OAAvB~~;~~AACA~~,~~SAAS~~,~~0BAAT~~,~~QAA2C~~,~~qBAA3C~~;~~AACA~~,~~SAAS~~,~~uBAAT~~,~~QAAwC~~,~~kBAAxC~~;~~AACA~~,~~SAAS~~,~~2BAAT~~,~~QAA4C~~,+~~BAA5C~~;~~AACA~~,~~SAAS~~,~~6BAAT~~,~~QAA8C~~,~~wBAA9C~~;AAIA~~;;;AAGG;;AACH~~,OAAO,~~MAAM~~,WAAW,~~gBAA0C~~,KAAK,~~CAAC~~,~~UAAN~~,~~CAAiB,~~CAAC,~~KAAD~~,~~EAAQ~~,~~GAAR~~,~~KAAe~~;EAChG,~~MAAM~~,KAAK,~~GAAG~~,uBAAuB,~~CAAC~~,~~KAAD~~,~~EAAQ~~,~~GAAR~~,~~CAArC~~;~~EACA~~,~~MAAM~~,aAAa,~~GAAG~~,2BAA2B,~~CAAC~~,~~KAAD~~,~~CAAjD~~;~~EAEA~~,6BAA6B,~~CAAC~~,~~KAAD~~,~~CAA7B~~;~~EACA~~,~~OAAO~~,0BAA0B,~~CAAC~~,~~KAAD~~,~~EAAQ~~,~~aAAR~~,~~CAAjC~~;~~AACD~~,~~CANiE~~,~~CAA3D~~;~~AAQP~~,WAAW,~~CAAC~~,~~WAAZ~~,~~GAA0B~~,~~aAA1B~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;;AAIA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EACjD,MAAME,aAAa,GAAGP,2BAA2B,CAACM,KAAK,CAAC;EAExDL,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAOR,0BAA0B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACzD,CAAC,CAAC;AAEFL,WAAW,CAACM,WAAW,GAAG,aAAa","names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","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"]}

package/lib/components/AvatarGroup/renderAvatarGroup.js CHANGED Viewed

@@ -4,7 +4,6 @@ import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
 /**
  * Render the final JSX of AvatarGroup
  */
 export const renderAvatarGroup_unstable = (state, contextValues) => {
   const {
     slots,
@@ -12,7 +11,8 @@ export const renderAvatarGroup_unstable = (state, contextValues) => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(AvatarGroupProvider, {
     value: contextValues.avatarGroup
-  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
 //# sourceMappingURL=renderAvatarGroup.js.map

package/lib/components/AvatarGroup/renderAvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"~~mappings":"AAAA,OAAO,KAAK,~~KAAZ~~,~~MAAuB,OAAvB~~;~~AACA~~,~~SAAS~~,~~QAAT~~,~~QAAyB~~,~~2BAAzB~~;~~AACA~~,~~SAAS~~,~~mBAAT~~,~~QAAoC~~,~~mCAApC~~;AAGA~~;;AAEG;;AACH~~,OAAO,~~MAAM~~,0BAA0B,GAAG,~~CAAC~~,~~KAAD~~,~~EAA0B~~,~~aAA1B~~,~~KAAqE~~;EAC7G,MAAM;~~IAAE~~,~~KAAF~~;~~IAAS~~;~~EAAT~~,~~IAAuB~~,QAAQ,~~CAAmB~~,~~KAAnB~~,~~CAArC~~;~~EAEA~~,~~oBACE~~,~~KAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,~~mBAAD~~,~~EAAoB~~;~~IAAC~~,KAAK,~~EAAE~~,~~aAAa,CAAC~~;~~EAAtB~~,~~CAApB~~,~~eACE~~,~~KAAA~~,~~CAAA~~,~~aAAA~~,CAAC,~~KAAK~~,~~CAAC~~,~~IAAP~~,~~EAAW~~,~~EAAA~~,~~GAAK~~,~~SAAS~~,~~CAAC;EAAf~~,~~CAAX~~,~~CADF~~,~~CADF;AAKD~~,~~CARM~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;AAGA,OAAO,MAAMC,0BAA0B,GAAG,CAACC,KAAuB,EAAEC,aAAuC,KAAI;EAC7G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,oBAACE,mBAAmB;IAACM,KAAK,EAAEH,aAAa,CAACI;EAAW,gBACnDT,oBAACM,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACd;AAE1B,CAAC","names":["React","getSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"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"]}

package/lib/components/AvatarGroup/useAvatarGroup.js CHANGED Viewed

@@ -8,7 +8,6 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  * @param props - props from this instance of AvatarGroup
  * @param ref - reference to root HTMLElement of AvatarGroup
  */
 export const useAvatarGroup_unstable = (props, ref) => {
   const {
     layout = 'spread',

package/lib/components/AvatarGroup/useAvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"~~mappings":"AACA,~~SAAS~~,~~qBAAT~~,~~QAAsC~~,~~2BAAtC~~;~~AAGA;;;;;;;;AAQG;;AACH~~,OAAO,~~MAAM~~,uBAAuB,GAAG,~~CAAC~~,~~KAAD~~,~~EAA0B~~,~~GAA1B~~,~~KAA2E~~;EAChH,MAAM;~~IAAE~~,MAAM,GAAG,~~QAAX~~;~~IAAqB~~,IAAI,~~GAAG~~;~~EAA5B~~,~~IAAuD~~,~~KAA7D~~;~~EAEA~~,~~MAAM~~,IAAI,~~GAAG~~,qBAAqB,CAChC,~~KADgC~~,~~EAEhC~~;~~IACE~~,IAAI,EAAE,~~OADR~~;~~IAEE~~,~~GAAG~~,~~KAFL~~;~~IAGE~~;~~EAHF~~,~~CAFgC~~,~~EAOhC,~~CAAC,~~MAAD~~,~~CAPgC~~,~~CAAlC~~;~~EAUA~~,OAAO;~~IACL~~,~~MADK~~;~~IAEL~~,~~IAFK~~;~~IAGL~~,UAAU,EAAE;~~MACV~~,IAAI,EAAE;~~IADI,CAHP~~;~~IAML~~;~~EANK,CAAP~~;~~AAQD~~,~~CArBM~~;~~AAuBP~~,OAAO,~~MAAM~~,sBAAsB,GAAG,~~EAA~~/B","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC,MAAM,GAAG,QAAQ;IAAEC,IAAI,GAAGC;EAAsB,CAAE,GAAGJ,KAAK;EAElE,MAAMK,IAAI,GAAGP,qBAAqB,CAChC,KAAK,EACL;IACEQ,IAAI,EAAE,OAAO;IACb,GAAGN,KAAK;IACRC;GACD,EACD,CAAC,MAAM,CAAC,CACT;EAED,OAAO;IACLC,MAAM;IACNC,IAAI;IACJI,UAAU,EAAE;MACVF,IAAI,EAAE;KACP;IACDA;GACD;AACH,CAAC;AAED,OAAO,MAAMD,sBAAsB,GAAG,EAAE","names":["getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","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"]}

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"names":[],"~~mappings":"AAEA,OAAO,~~MAAM~~,2BAA2B,~~GAAI~~,~~KAAD~~,~~IAAsD~~;EAC/F,MAAM;~~IAAE~~,~~MAAF~~;~~IAAU~~;~~EAAV~~,~~IAAmB~~,~~KAAzB~~;~~EAEA~~,~~MAAM~~,WAAW,GAA4B;~~IAC3C~~,~~MAD2C~~;~~IAE3C~~;~~EAF2C,CAA7C~~;~~EAKA~~,OAAO;~~IAAE~~;~~EAAF~~,~~CAAP~~;~~AACD~~,~~CATM~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AAEA,OAAO,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","names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"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"]}

package/lib/components/AvatarGroup/useAvatarGroupStyles.js CHANGED Viewed

@@ -7,28 +7,25 @@ export const avatarGroupClassNames = {
 /**
  * Styles for the root slot.
  */
 const useStyles = /*#__PURE__*/__styles({
-  "base": {
-    "mc9l5x": "ftuwxu6",
-    "qhf8xq": "f10pi13n"
+  base: {
+    mc9l5x: "ftuwxu6",
+    qhf8xq: "f10pi13n"
   },
-  "pie": {
-    "Bgl5zvf": "f1uz6ud1",
-    "De3pzq": "f1ganh6p",
-    "Bsw6fvg": "fe2ae1k"
+  pie: {
+    Bgl5zvf: "f1uz6ud1",
+    De3pzq: "f1ganh6p",
+    Bsw6fvg: "fe2ae1k"
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}"],
-  "m": [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
-    "m": "(forced-colors: active)"
+  d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}"],
+  m: [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
+    m: "(forced-colors: active)"
   }]]
 });
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */
 export const useAvatarGroupStyles_unstable = state => {
   const {
     layout,

package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"~~mappings":"AAAA,~~mBAAqB~~,~~YAArB~~,~~QAAyC~~,~~gBAAzC~~;~~AACA~~,~~SAAS~~,~~MAAT~~,~~QAAuB~~,~~uBAAvB~~;~~AACA~~,~~SAAS~~,~~aAAT~~,~~QAA8B~~,~~2BAA9B~~;~~AAIA~~,OAAO,~~MAAM~~,qBAAqB,GAAqC;~~EACrE~~,IAAI,EAAE;~~AAD+D,CAAhE~~;~~AAIP;;AAEG;;AACH~~,~~MAAM~~,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,~~EAAlB~~;~~AAcA;;AAEG~~;;;~~AACH~~,OAAO,~~MAAM~~,6BAA6B,~~GAAI~~,~~KAAD~~,~~IAA8C~~;EACzF,MAAM;~~IAAE~~,~~MAAF~~;~~IAAU~~;~~EAAV~~,~~IAAmB~~,~~KAAzB~~;~~EACA~~,~~MAAM~~,MAAM,~~GAAG~~,SAAS,~~EAAxB~~;~~EACA~~,~~MAAM~~,UAAU,~~GAAG~~,aAAa,~~EAAhC~~;~~EAEA~~,KAAK,~~CAAC~~,~~IAAN~~,~~CAAW~~,~~SAAX~~,~~GAAuB~~,YAAY,~~CACjC~~,qBAAqB,~~CAAC~~,~~IADW~~,~~EAEjC~~,MAAM,~~CAAC~~,~~IAF0B~~,~~EAGjC~~,MAAM,KAAK,~~KAAX~~,~~IAAoB~~,UAAU,~~CAAC~~,~~IAAD~~,~~CAHG~~,~~EAIjC~~,MAAM,KAAK,~~KAAX~~,~~IAAoB~~,MAAM,~~CAAC~~,~~GAJM~~,~~EAKjC~~,KAAK,~~CAAC~~,~~IAAN~~,~~CAAW~~,~~SALsB~~,~~CAAnC~~;~~EAQA~~,~~OAAO~~,~~KAAP~~;~~AACD~~,~~CAdM~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,2BAA2B;AAIzD,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGL,SAAS,EAAE;EAC1B,MAAMM,UAAU,GAAGT,aAAa,EAAE;EAElCK,KAAK,CAACH,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1BM,MAAM,CAACG,IAAI,EACXL,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EACpCD,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACI,GAAG,EAC9BP,KAAK,CAACH,IAAI,CAACQ,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","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"]}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js CHANGED Viewed

@@ -6,7 +6,6 @@ import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';
  * The AvatarGroupItem component represents a single person or entity.
  * AvatarGroupItem should only be used in an AvatarGroup component.
  */
 export const AvatarGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAvatarGroupItem_unstable(props, ref);
   useAvatarGroupItemStyles_unstable(state);

package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"names":[],"~~mappings":"AAAA,OAAO,KAAK,~~KAAZ~~,~~MAAuB,OAAvB~~;~~AACA~~,~~SAAS~~,~~8BAAT~~,~~QAA+C~~,~~yBAA/C~~;~~AACA~~,~~SAAS~~,~~2BAAT~~,~~QAA4C~~,~~sBAA5C~~;~~AACA~~,~~SAAS~~,~~iCAAT~~,~~QAAkD~~,~~4BAAlD~~;AAIA~~;;;AAGG;;AACH~~,OAAO,~~MAAM~~,eAAe,~~gBAA8C~~,KAAK,~~CAAC~~,~~UAAN~~,~~CAAiB,~~CAAC,~~KAAD~~,~~EAAQ~~,~~GAAR~~,~~KAAe~~;EACxG,~~MAAM~~,KAAK,~~GAAG~~,2BAA2B,~~CAAC~~,~~KAAD~~,~~EAAQ~~,~~GAAR~~,~~CAAzC~~;~~EAEA~~,iCAAiC,~~CAAC~~,~~KAAD~~,~~CAAjC~~;~~EACA~~,~~OAAO~~,8BAA8B,~~CAAC~~,~~KAAD~~,~~CAArC~~;~~AACD~~,~~CALyE~~,~~CAAnE~~;~~AAOP~~,eAAe,~~CAAC~~,~~WAAhB~~,~~GAA8B~~,~~iBAA9B~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,iCAAiC,QAAQ,4BAA4B;AAI9E;;;;AAIA,OAAO,MAAMC,eAAe,gBAA8CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGN,2BAA2B,CAACI,KAAK,EAAEC,GAAG,CAAC;EAErDJ,iCAAiC,CAACK,KAAK,CAAC;EACxC,OAAOP,8BAA8B,CAACO,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFJ,eAAe,CAACK,WAAW,GAAG,iBAAiB","names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","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"]}

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js CHANGED Viewed

@@ -3,15 +3,17 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of AvatarGroupItem
  */
 export const renderAvatarGroupItem_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
-  }), state.isOverflowItem && /*#__PURE__*/React.createElement(slots.overflowLabel, { ...slotProps.overflowLabel
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.avatar, {
+    ...slotProps.avatar
+  }), state.isOverflowItem && /*#__PURE__*/React.createElement(slots.overflowLabel, {
+    ...slotProps.overflowLabel
   }));
 };
 //# sourceMappingURL=renderAvatarGroupItem.js.map

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"names":[],"~~mappings":"AAAA,OAAO,KAAK,~~KAAZ~~,~~MAAuB,OAAvB~~;~~AACA~~,~~SAAS~~,~~QAAT~~,~~QAAyB~~,~~2BAAzB~~;AAGA~~;;AAEG;;AACH~~,OAAO,~~MAAM~~,8BAA8B,~~GAAI~~,~~KAAD~~,~~IAAgC~~;EAC5E,MAAM;~~IAAE~~,~~KAAF~~;~~IAAS~~;~~EAAT~~,~~IAAuB~~,QAAQ,~~CAAuB~~,~~KAAvB~~,~~CAArC~~;~~EAEA~~,~~oBACE~~,~~KAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~IAAP~~,~~EAAW~~,~~EAAA~~,~~GAAK~~,~~SAAS~~,~~CAAC~~;~~EAAf~~,~~CAAX~~,~~eACE~~,~~KAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC,~~KAAK,~~CAAC~~,~~MAAP~~,~~EAAa~~,~~EAAA~~,~~GAAK~~,~~SAAS~~,~~CAAC~~;~~EAAf~~,~~CAAb~~,~~CADF~~,~~EAEG~~,~~KAAK~~,~~CAAC~~,~~cAAN,iBAAwB,KAAA,CAAA,aAAA,~~CAAC,~~KAAK~~,~~CAAC~~,~~aAAP~~,~~EAAoB~~,~~EAAA~~,~~GAAK~~,~~SAAS~~,~~CAAC;EAAf~~,~~CAApB~~,~~CAF3B~~,~~CADF;AAMD~~,~~CATM~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,MAAM;IAAA,GAAKF,SAAS,CAACE;EAAM,EAAI,EACrCJ,KAAK,CAACK,cAAc,iBAAIR,oBAACI,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,CAClE;AAEjB,CAAC","names":["React","getSlots","renderAvatarGroupItem_unstable","state","slots","slotProps","root","avatar","isOverflowItem","overflowLabel"],"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"]}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js CHANGED Viewed

@@ -12,12 +12,11 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
  * @param props - props from this instance of AvatarGroupItem
  * @param ref - reference to root HTMLElement of AvatarGroupItem
  */
 export const useAvatarGroupItem_unstable = (props, ref) => {
   const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);
   const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);
-  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout); // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
+  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
+  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
   const {
     style,
     className,
@@ -25,12 +24,10 @@ export const useAvatarGroupItem_unstable = (props, ref) => {
   } = props;
   const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
   const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
   if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
     // eslint-disable-next-line no-console
     console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
   }
   return {
     isOverflowItem: groupIsOverflow,
     layout,

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"~~mappings":"AACA,~~SAAS~~,~~MAAT~~,~~QAAuB~~,~~kBAAvB~~;~~AACA~~,~~SAAS~~,~~kBAAT~~,~~EAA6B~~,~~8BAA7B~~,~~QAAmE~~,~~mCAAnE~~;~~AACA~~,~~SAAS~~,~~sBAAT~~,~~QAAuC~~,+~~BAAvC~~;~~AACA~~,~~SAAS~~,~~gBAAT~~,~~QAAiC~~,~~2BAAjC~~;~~AACA~~,~~SAAS~~,~~mBAAT~~,~~QAAoC~~,~~kCAApC~~;~~AAGA;;;;;;;;AAQG;;AACH~~,OAAO,~~MAAM~~,2BAA2B,GAAG,~~CACzC~~,~~KADyC~~,~~EAEzC~~,~~GAFyC~~,~~KAGjB~~;EACxB,~~MAAM~~,eAAe,~~GAAG~~,8BAA8B,~~CAAC~~,GAAG,~~IAAI~~,GAAG,~~CAAC~~,~~UAAZ~~,~~CAAtD~~;~~EACA~~,~~MAAM~~,SAAS,~~GAAG~~,8BAA8B,~~CAAC~~,GAAG,~~IAAI~~,GAAG,~~CAAC~~,~~IAAZ~~,~~CAAhD~~;~~EACA~~,~~MAAM~~,MAAM,~~GAAG~~,8BAA8B,~~CAAC~~,GAAG,~~IAAI~~,GAAG,~~CAAC~~,~~MAAZ~~,~~CAA7C,CAHwB,CAIxB;;~~EACA,MAAM;~~IAAE~~,~~KAAF~~;~~IAAS~~,~~SAAT~~;~~IAAoB~~,~~GAAG~~;~~EAAvB~~,~~IAA2C~~,~~KAAjD~~;~~EACA~~,~~MAAM~~,IAAI,~~GAAG~~,SAAS,~~KAAA~~,~~IAAT~~,~~IAAA~~,SAAS,~~KAAA~~,~~KAAA,CAAT,GAAA,SAAA,GAAa,sBAA1B~~;~~EACA~~,~~MAAM~~,qBAAqB,~~GAAG~~,mBAAmB,~~CAAC~~,~~kBAAD~~,~~CAAjD;;EAEA~~,~~IAAI~~,OAAO,~~CAAC~~,~~GAAR~~,~~CAAY~~,~~QAAZ~~,~~KAAyB~~,~~YAAzB~~,~~IAAyC~~,~~CAAC~~,~~qBAA9C~~,~~EAAqE~~;IACnE;~~IACA~~,OAAO,CAAC,~~IAAR~~,~~CAAa,oEAAb;EACD~~;;~~EAED~~,OAAO;~~IACL~~,cAAc,~~EAAE~~,~~eADX~~;~~IAEL~~,~~MAFK~~;~~IAGL~~,~~IAHK~~;~~IAIL~~,UAAU,EAAE;~~MACV~~,IAAI,~~EAAE~~,eAAe,GAAG,~~IAAH~~,~~GAAU~~,~~KADrB~~;~~MAEV~~,MAAM,~~EAAE~~,~~MAFE~~;~~MAGV~~,aAAa,EAAE;~~IAHL,CAJP~~;~~IASL~~,IAAI,~~EAAE~~,gBAAgB,~~CAAC~~,KAAK,~~CAAC~~,~~IAAP~~,~~EAAa~~;~~MACjC~~,QAAQ,EAAE,~~IADuB~~;~~MAEjC~~,YAAY,EAAE;~~QACZ~~,~~KADY~~;~~QAEZ;MAFY;IAFmB~~,~~CAAb,CATjB~~;~~IAgBL~~,MAAM,~~EAAE~~,gBAAgB,~~CAAC~~,KAAK,~~CAAC~~,~~MAAP~~,~~EAAe~~;~~MACrC~~,QAAQ,EAAE,~~IAD2B~~;~~MAErC~~,YAAY,EAAE;~~QACZ~~,~~GADY~~;~~QAEZ~~,~~IAFY~~;~~QAGZ~~,KAAK,EAAE,~~UAHK~~;~~QAIZ~~,~~GAAG;MAJS;IAFuB~~,~~CAAf,CAhBnB~~;~~IAyBL~~,aAAa,~~EAAE~~,gBAAgB,~~CAAC~~,KAAK,~~CAAC~~,~~aAAP~~,~~EAAsB~~;~~MACnD~~,QAAQ,EAAE,~~IADyC~~;~~MAEnD~~,YAAY,EAAE;QACZ;QACA,~~eAAe~~,~~IAFH~~;~~QAGZ~~,QAAQ,~~EAAE~~,KAAK,~~CAAC~~;~~MAHJ~~;~~IAFqC~~,~~CAAtB;EAzB1B~~,~~CAAP;AAkCD~~,~~CAnDM~~","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"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":"AACA,SAASA,MAAM,QAAQ,kBAAkB;AACzC,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,mCAAmC;AACtG,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,mBAAmB,QAAQ,kCAAkC;AAGtE;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAMC,eAAe,GAAGP,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC;EAC7E,MAAMC,SAAS,GAAGV,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACG,IAAI,CAAC;EACjE,MAAMC,MAAM,GAAGZ,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACI,MAAM,CAAC;EAChE;EACA,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC;EAAe,CAAE,GAAGV,KAAK;EACtD,MAAMM,IAAI,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIT,sBAAsB;EAChD,MAAMe,qBAAqB,GAAGb,mBAAmB,CAACJ,kBAAkB,CAAC;EAErE,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAI,CAACH,qBAAqB,EAAE;IACnE;IACAI,OAAO,CAACC,IAAI,CAAC,oEAAoE,CAAC;;EAGpF,OAAO;IACLC,cAAc,EAAEf,eAAe;IAC/BK,MAAM;IACND,IAAI;IACJY,UAAU,EAAE;MACVC,IAAI,EAAEjB,eAAe,GAAG,IAAI,GAAG,KAAK;MACpCkB,MAAM,EAAE3B,MAAM;MACd4B,aAAa,EAAE;KAChB;IACDF,IAAI,EAAEtB,gBAAgB,CAACG,KAAK,CAACmB,IAAI,EAAE;MACjCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZf,KAAK;QACLC;;KAEH,CAAC;IACFW,MAAM,EAAEvB,gBAAgB,CAACG,KAAK,CAACoB,MAAM,EAAE;MACrCE,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZtB,GAAG;QACHK,IAAI;QACJkB,KAAK,EAAE,UAAU;QACjB,GAAGd;;KAEN,CAAC;IACFW,aAAa,EAAExB,gBAAgB,CAACG,KAAK,CAACqB,aAAa,EAAE;MACnDC,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ;QACA,aAAa,EAAE,IAAI;QACnBE,QAAQ,EAAEzB,KAAK,CAAC0B;;KAEnB;GACF;AACH,CAAC","names":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"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"]}