npm - @fluentui/react-avatar - Versions diffs - 9.0.0-rc.9 → 9.0.0 - Mend

@fluentui/react-avatar 9.0.0-rc.9 → 9.0.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 (87) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,YAAxB;AACP,OAAO,MAAM,gBAAgB,GAAgC;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,KAAK,EAAE,mBAFoD;AAG3D,EAAA,QAAQ,EAAE,sBAHiD;AAI3D,EAAA,IAAI,EAAE,kBAJqD;AAK3D,EAAA,KAAK,EAAE;AALoD,CAAtD,C,CAQP;AACA;AACA;;AAEA,MAAM,iBAAiB,GAAG;AACxB,EAAA,UAAU,EAAE,MADY;AAExB,EAAA,WAAW,EAAE,OAFW;AAGxB,EAAA,WAAW,EAAE,OAHW;AAIxB,EAAA,WAAW,EAAE,OAJW;AAKxB,EAAA,WAAW,EAAE,OALW;AAMxB,EAAA,WAAW,EAAE,OANW;AAOxB,EAAA,WAAW,EAAE;AAPW,CAA1B;AAUA,MAAM,eAAe,GAAG;AACtB,EAAA,SAAS,EAAE,iBAAiB,CAAC,UADP;AAEtB,EAAA,MAAM,EAAE,iBAAiB,CAAC,WAFJ;AAGtB,EAAA,IAAI,EAAE,iBAAiB,CAAC,WAHF;AAItB,EAAA,MAAM,EAAE,iBAAiB,CAAC,WAJJ;AAKtB,EAAA,IAAI,EAAE,iBAAiB,CAAC,WALF;AAMtB,EAAA,MAAM,EAAE,iBAAiB,CAAC,WANJ;AAOtB,EAAA,SAAS,EAAE,iBAAiB,CAAC;AAPP,CAAxB;AAUA,MAAM,cAAc,GAAG;AACrB,EAAA,aAAa,EAAE,mCADM;AAErB,EAAA,aAAa,EAAE,mCAFM;AAGrB,EAAA,aAAa,EAAE,mCAHM;AAIrB,EAAA,aAAa,EAAE,mCAJM;AAKrB,EAAA,aAAa,EAAE,mCALM;AAMrB,EAAA,aAAa,EAAE,mCANM;AAOrB,EAAA,WAAW,EAAE,mCAPQ;AAQrB,EAAA,QAAQ,EAAE,mCARW;AASrB,EAAA,MAAM,EAAE;AATa,CAAvB;AAYA,MAAM,UAAU,GAAG;AACjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aADhB;AAEjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aAFhB;AAGjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aAHhB;AAIjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aAJhB;AAKjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aALhB;AAMjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aANhB;AAOjB,EAAA,QAAQ,EAAE,cAAc,CAAC,WAPR;AAQjB,EAAA,UAAU,EAAE,cAAc,CAAC,QARV;AASjB,EAAA,UAAU,EAAE,cAAc,CAAC;AATV,CAAnB;;AAYA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAyJA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAiBA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAmIA,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,KAAR;AAAe,IAAA,MAAf;AAAuB,IAAA,gBAAvB;AAAyC,IAAA;AAAzC,MAAmD,KAAzD;AAEA,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM,WAAW,GAAG,CAAC,MAAM,CAAC,IAAR,EAAc,UAAU,CAAC,IAAD,CAAxB,EAAgC,WAAW,CAAC,KAAD,CAA3C,CAApB;;AAEA,MAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,kBAAxB;AACD,GAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,kBAAxB;AACD,GAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,eAAxB;AACD,GAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,aAAxB;AACD,GAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,aAAxB;AACD,GAFM,MAEA;AACL,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,SAAxB;AACD;;AAED,MAAI,KAAK,KAAK,QAAd,EAAwB;AACtB,QAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;AACD,KAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;AACD,KAFM,MAEA;AACL,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD;AACF;;AAED,MAAI,MAAM,KAAK,QAAX,IAAuB,MAAM,KAAK,UAAtC,EAAkD;AAChD,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,gBAAxB;;AAEA,QAAI,gBAAgB,KAAK,MAArB,IAA+B,gBAAgB,KAAK,aAAxD,EAAuE;AACrE,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,IAAxB;;AAEA,UAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,SAAxB;AACD,OAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;AACD,OAFM,MAEA;AACL,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD;AACF;;AAED,QAAI,gBAAgB,KAAK,QAArB,IAAiC,gBAAgB,KAAK,aAA1D,EAAyE;AACvE,UAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,OAAxB;AACD,OAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,OAAxB;AACD,OAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;AACD,OAFM,MAEA;AACL,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;AACD;AACF,KAzB+C,CA2BhD;;;AACA,QAAI,MAAM,KAAK,UAAf,EAA2B;AACzB,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;AACD;AACF;;AAED,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,gBAAgB,CAAC,IAAlB,EAAwB,GAAG,WAA3B,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,gBAAgB,CAAC,KADiB,EAElC,MAAM,CAAC,KAF2B,EAGlC,IAAI,IAAI,EAAR,IAAc,MAAM,CAAC,UAHa,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;AAMD;;AAED,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,gBAAgB,CAAC,KAAlB,EAAyB,MAAM,CAAC,KAAhC,EAAuC,KAAK,CAAC,KAAN,CAAY,SAAnD,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,gBAAgB,CAAC,QAAlB,EAA4B,MAAM,CAAC,YAAnC,EAAiD,KAAK,CAAC,QAAN,CAAe,SAAhE,CAAvC;AACD;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,QAAI,aAAJ;;AACA,QAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA;AACL,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD;;AAED,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAEjC,MAAM,CAAC,YAF0B,EAGjC,aAHiC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD;;AAED,SAAO,KAAP;AACD,CAlHM","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\n/*\n @deprecated Use `avatarClassNames.root` instead.\n /\nexport const avatarClassName = 'fui-Avatar';\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\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n duration50: '50ms',\n duration100: '100ms',\n duration150: '150ms',\n duration200: '200ms',\n duration300: '300ms',\n duration400: '400ms',\n duration500: '500ms',\n};\n\nconst animationTiming = {\n ultraFast: animationDuration.duration50,\n faster: animationDuration.duration100,\n fast: animationDuration.duration150,\n normal: animationDuration.duration200,\n slow: animationDuration.duration300,\n slower: animationDuration.duration400,\n ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n linear: 'linear',\n};\n\nconst animations = {\n fastOutSlowInMax: animationLines.decelerateMax,\n fastOutSlowInMid: animationLines.decelerateMid,\n fastOutSlowInMin: animationLines.decelerateMin,\n slowOutFastInMax: animationLines.accelerateMax,\n slowOutFastInMid: animationLines.accelerateMid,\n slowOutFastInMin: animationLines.accelerateMin,\n fastEase: animationLines.maxEasyEase,\n normalEase: animationLines.easyEase,\n nullEasing: animationLines.linear,\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: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\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: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n },\n },\n\n ring: {\n ':before': {\n ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\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: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n ':before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\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\nconst 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 },\n brand: {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n darkRed: {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n },\n darkGreen: {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n lightTeal: {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n },\n royalBlue: {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\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,"sources":["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\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n duration50: '50ms',\n duration100: '100ms',\n duration150: '150ms',\n duration200: '200ms',\n duration300: '300ms',\n duration400: '400ms',\n duration500: '500ms',\n};\n\nconst animationTiming = {\n ultraFast: animationDuration.duration50,\n faster: animationDuration.duration100,\n fast: animationDuration.duration150,\n normal: animationDuration.duration200,\n slow: animationDuration.duration300,\n slower: animationDuration.duration400,\n ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n linear: 'linear',\n};\n\nconst animations = {\n fastOutSlowInMax: animationLines.decelerateMax,\n fastOutSlowInMid: animationLines.decelerateMid,\n fastOutSlowInMin: animationLines.decelerateMin,\n slowOutFastInMax: animationLines.accelerateMax,\n slowOutFastInMid: animationLines.accelerateMid,\n slowOutFastInMin: animationLines.accelerateMin,\n fastEase: animationLines.maxEasyEase,\n normalEase: animationLines.easyEase,\n nullEasing: animationLines.linear,\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: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\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: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\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: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\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 },\n brand: {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\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/"}

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

@@ -3,7 +3,8 @@ import { useAvatarGroup_unstable } from './useAvatarGroup';
 import { renderAvatarGroup_unstable } from './renderAvatarGroup';
 import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';
 /**
- * AvatarGroup component - TODO: add more docs
+ * 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) => {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;~~AAEG;;~~AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;~~AAChG~~,~~QAAM~~,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;~~AAEA~~,~~EAAA,~~6BAA6B,CAAC,KAAD,CAA7B;~~AACA~~,~~SAAO~~,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n AvatarGroup component - ~~TODO:~~ ~~add~~ ~~more~~ ~~docs~~\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroup_unstable(props, ref);\n\n useAvatarGroupStyles_unstable(state);\n return renderAvatarGroup_unstable(state);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;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;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\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\n useAvatarGroupStyles_unstable(state);\n return renderAvatarGroup_unstable(state);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ ~~ComponentState, Slot~~ } from '@fluentui/react-~~utilities~~';\nimport { ~~PopoverSurface~~ } from '@fluentui/react-~~popover~~';\nimport { AvatarSizes } from '../Avatar/Avatar.types';\nimport { ~~Button~~ } ~~from~~ ~~'@fluentui/react-button';\nimport { TooltipProps~~ } from '@fluentui/react-~~tooltip~~';\n\nexport type AvatarGroupSlots = {\n root: Slot<'div'~~>;\~~n\n /*\n Popover trigger slot that can be used to change the overflow indicator.\n /\n ~~popoverTrigger~~?: Slot<~~typeof Button>;\~~n\n /\n ~~Popover~~ ~~surface~~ that ~~will~~ ~~be displayed when~~ the ~~popover~~ ~~is triggered~~.\n /\n ~~popoverSurface~~?: Slot<typeof PopoverSurface~~>;\~~n};\n\n/\n AvatarGroup Props\n /\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n /\n Layout the Avatars should be displayed as.\n * @default spread\n /\n layout?: 'spread' \| 'stack' \| 'pie';\n\n /\n Maximum number of Avatars to be displayed before overflowing.\n * ~~NOTE~~: if pie layout is used, `maxAvatars` will be ignored.\n * @default 5\n /\n maxAvatars?: number;\n\n /\n Whether the overflow indicator should render an icon instead of the number of overflowed avatars.\n * @default ~~false~~\n /\n overflowIndicator?: '~~number-overflowed~~' \| 'icon';\n\n /\n Size of the avatars.\n * @default 32\n /\n size?: AvatarSizes;\n~~\n /\n Strings for localizing text in the tooltip.\n /\n strings?: AvatarGroupStrings;\n~~};\n\n/\n State used in rendering AvatarGroup\n /\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> ~~& {\~~n ~~tooltipContent:~~ ~~TooltipProps[~~'~~content~~'~~];\n};\n\nexport~~ ~~type~~ ~~AvatarGroupStrings~~ = {\n /\n ~~Text~~ ~~applied~~ to ~~the~~ ~~overflow~~ ~~indicator's~~ ~~tooltip.\~~n * ~~Can~~ ~~include~~ ~~the token~~ \~~"\\{numOverflowedAvatars\\}\"~~ ~~which~~ ~~will~~ be ~~replaced with~~ the ~~number~~ ~~of overflowed avatars~~.\n */\n tooltipContent: ~~string~~;\n};\n"]}
1	+ {"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PopoverSurface } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarSizes } 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 Popover trigger slot that can be used to change the overflow indicator.\n /\n overflowButton?: NonNullable<Slot<'button'>>;\n\n /\n List that contains the overflow AvatarGroupItems.\n /\n overflowContent?: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/\n AvatarGroup Props\n /\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n /\n Layout the Avatars should be displayed as.\n * @default spread\n /\n layout?: 'spread' \| 'stack' \| 'pie';\n\n /\n Maximum number of Avatars to be displayed before overflowing.\n * Note: if pie layout is used, `maxAvatars` will be ignored.\n * @default 5\n /\n maxAvatars?: number;\n\n /\n Whether the overflow indicator should render an icon instead of the number of overflowed avatars.\n * Note: The overflowIndicator will default to `icon` when the size is less than 24.\n * @default count\n /\n overflowIndicator?: 'count' \| 'icon';\n\n /\n Size of the avatars.\n * @default 32\n /\n size?: AvatarSizes;\n};\n\n/\n State used in rendering AvatarGroup\n /\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> &\n Required<Pick<AvatarGroupProps, 'layout' \| 'size' \| 'overflowIndicator'>> & {\n /\n Whether there are more Avatars than `maxAvatars`.\n * @default false\n /\n hasOverflow: boolean;\n\n /\n Tooltip content for the overflow indicator.\n */\n tooltipContent: TooltipProps['content'];\n\n nonOverflowAvatarsCount: number;\n };\n"]}

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

@@ -1,5 +1,8 @@
 import * as React from 'react';
+import { Popover, PopoverTrigger } from '@fluentui/react-popover';
+import { Tooltip } from '@fluentui/react-tooltip';
 import { getSlots } from '@fluentui/react-utilities';
+import { AvatarGroupContext } from '../../contexts/AvatarGroupContext';
 /**
  * Render the final JSX of AvatarGroup
  */
@@ -8,9 +11,33 @@ export const renderAvatarGroup_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state); // TODO Add additional slots in the appropriate place
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  });
+  } = getSlots(state);
+  const {
+    layout,
+    size,
+    nonOverflowAvatarsCount
+  } = state;
+  return /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
+    value: {
+      layout,
+      size,
+      nonOverflowAvatarsCount
+    }
+  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && /*#__PURE__*/React.createElement(Popover, {
+    trapFocus: true,
+    size: "small"
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: state.tooltipContent,
+    relationship: "label"
+  }, /*#__PURE__*/React.createElement(slots.overflowButton, { ...slotProps.overflowButton
+  }))), /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
+    value: {
+      isOverflow: true,
+      layout,
+      size: 24
+    }
+  }, /*#__PURE__*/React.createElement(slots.overflowContent, { ...slotProps.overflowContent
+  })))));
 };
 //# sourceMappingURL=renderAvatarGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;~~AACpE~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~KAAF;~~AAAS,IAAA~~;~~AAAT~~,~~MAAuB~~,QAAQ,CAAmB,KAAnB,CAArC,~~CADoE~~,~~CAGpE;;AACA~~,~~sBAAO~~,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;~~AAAf~~,~~GAAX~~,~~CAAP~~;~~AACD~~,~~CALM~~","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/*\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n // ~~TODO~~ ~~Add~~ ~~additional~~ ~~slots~~ in ~~the~~ ~~appropriate place~~\n return <slots.root {...slotProps.root} ~~/>;\~~n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,EAAkB,cAAlB,QAAwC,yBAAxC;AACA,SAAS,OAAT,QAAwB,yBAAxB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,iBACC,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,eACE,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,eAME,KAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CANF,CAHJ,CADF,CADF;AAmBD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/*\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n const { layout, size, nonOverflowAvatarsCount } = state;\n\n return (\n <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n <slots.root {...slotProps.root}>\n {state.root.children}\n {state.hasOverflow && slots.overflowButton && slots.overflowContent && (\n <Popover trapFocus size=\"small\">\n <PopoverTrigger>\n <Tooltip content={state.tooltipContent} relationship=\"label\">\n <slots.overflowButton {...slotProps.overflowButton} />\n </Tooltip>\n </PopoverTrigger>\n <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n <slots.overflowContent {...slotProps.overflowContent} />\n </AvatarGroupContext.Provider>\n </Popover>\n )}\n </slots.root>\n </AvatarGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,7 +1,8 @@
+import * as React from 'react';
+import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { PopoverSurface } from '@fluentui/react-popover';
-import { Button } from '@fluentui/react-button';
-import { avatarGroupDefaultStrings } from './AvatarGroup.strings';
 /**
  * Create the state required to render AvatarGroup.
  *
@@ -15,37 +16,76 @@ import { avatarGroupDefaultStrings } from './AvatarGroup.strings';
 export const useAvatarGroup_unstable = (props, ref) => {
   const {
     children,
-    strings = avatarGroupDefaultStrings
+    layout = 'spread',
+    maxAvatars = 5,
+    size = defaultAvatarGroupSize
   } = props;
+  const {
+    overflowIndicator = size < 24 ? 'icon' : 'count'
+  } = props;
+  const childrenArray = React.Children.toArray(children);
+  if (process.env.NODE_ENV !== 'production' && childrenArray.find(child => /*#__PURE__*/React.isValidElement(child) && child.type !== AvatarGroupItem)) {
+    // eslint-disable-next-line no-console
+    console.warn("AvatarGroup's children must be of type AvatarGroupItems.");
+  }
+  let rootChildren = childrenArray;
+  let overflowChildren;
+  let overflowButtonChildren;
+  if (layout === 'pie') {
+    rootChildren = childrenArray.slice(0, 3);
+    overflowChildren = childrenArray;
+  } else if (childrenArray.length > maxAvatars) {
+    const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;
+    rootChildren = childrenArray.slice(numOfAvatarsToHide);
+    overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);
+    if (overflowIndicator === 'icon') {
+      overflowButtonChildren = /*#__PURE__*/React.createElement(MoreHorizontalRegular, null);
+    } else {
+      overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;
+    }
+  }
+  const root = getNativeElementProps('div', {
+    role: 'group',
+    ...props,
+    ref,
+    children: rootChildren
+  }, ['size']);
+  const overflowButton = resolveShorthand(props.overflowButton, {
+    required: true,
+    defaultProps: {
+      children: overflowButtonChildren
+    }
+  });
+  const overflowContent = resolveShorthand(props.overflowContent, {
+    required: true,
+    defaultProps: {
+      'aria-label': 'Overflow',
+      children: overflowChildren,
+      role: 'list',
+      tabIndex: 0
+    }
+  });
   return {
-    // TODO: Replace with actual logic.
-    tooltipContent: strings.tooltipContent.replace('{numOverflowedAvatars}', String(10)),
+    nonOverflowAvatarsCount: rootChildren.length,
+    hasOverflow: !!overflowChildren,
+    layout,
+    overflowIndicator,
+    size,
+    tooltipContent: 'View more people.',
     components: {
-      // TODO add each slot's element type or component
       root: 'div',
-      popoverSurface: PopoverSurface,
-      popoverTrigger: Button
+      overflowContent: PopoverSurface,
+      overflowButton: 'button'
     },
-    // TODO add appropriate slots, for example:
-    // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
-      ref,
-      ...props
-    }),
-    popoverTrigger: resolveShorthand(props.popoverTrigger, {
-      required: true,
-      defaultProps: {
-        // TODO: Update children
-        children: '+10'
-      }
-    }),
-    popoverSurface: resolveShorthand(props.popoverSurface, {
-      required: true,
-      defaultProps: {
-        // TODO: Update children
-        children: children
-      }
-    })
+    root,
+    overflowButton,
+    overflowContent
   };
 };
+export const defaultAvatarGroupSize = 32;
 //# sourceMappingURL=useAvatarGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/useAvatarGroup.ts"],"names":[],"mappings":"~~AAEA~~,~~SAAS~~,~~qBAAT~~,~~EAAgC~~,~~gBAAhC~~,~~QAAwD~~,~~2BAAxD~~;AACA,SAAS,~~cAAT~~,~~QAA+B~~,~~yBAA/B~~;AACA,SAAS,~~MAAT~~,~~QAAuB~~,~~wBAAvB~~;AACA,SAAS,~~yBAAT~~,~~QAA0C~~,~~uBAA1C~~;~~AAEA~~;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;~~AAChH~~,~~QAAM~~;~~AAAE~~,~~IAAA,~~QAAF;~~AAAY~~,~~IAAA~~,~~OAAO~~,GAAG;~~AAAtB~~,~~MAAoD~~,~~KAA1D~~;~~AAEA~~,~~SAAO~~;~~AACL~~;~~AACA~~,~~IAAA~~,~~cAAc~~,~~EAAE~~,~~OAAO~~,CAAC,~~cAAR~~,CAAuB,~~OAAvB~~,~~CAA~~+B,~~wBAA/B~~,~~EAAyD~~,MAAM,CAAC,~~EAAD~~,CAA/D~~,CAFX~~;~~AAGL~~,~~IAAA~~,~~UAAU~~,~~EAAE~~;~~AACV;AACA~~,~~MAAA~~,IAAI,~~EAAE~~,~~KAFI~~;~~AAGV~~,~~MAAA~~,~~cAAc~~,~~EAAE~~,~~cAHN;AAIV~~,~~MAAA~~,~~cAAc~~,~~EAAE~~;~~AAJN~~,~~KAHP~~;~~AASL~~;~~AACA~~;~~AACA~~,~~IAAA~~,IAAI,~~EAAE~~,qBAAqB,~~CAAC~~,~~KAAD~~,~~EAAQ~~;~~AACjC~~,~~MAAA~~,~~GADiC~~;~~AAEjC~~,~~SAAG~~;~~AAF8B~~,~~KAAR~~,~~CAXtB~~;~~AAeL~~,~~IAAA~~,cAAc,~~EAAE~~,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;~~AACrD~~,~~MAAA,~~QAAQ,EAAE,~~IAD2C~~;~~AAErD~~,~~MAAA,~~YAAY,EAAE;~~AACZ;AACA~~,~~QAAA,~~QAAQ,EAAE;~~AAFE~~;~~AAFuC~~,~~KAAvB~~,~~CAf3B~~;~~AAsBL~~,~~IAAA~~,~~cAAc~~,~~EAAE~~,gBAAgB,CAAC,KAAK,CAAC,~~cAAP~~,~~EAAuB~~;~~AACrD~~,~~MAAA~~,QAAQ,EAAE,~~IAD2C~~;~~AAErD~~,~~MAAA~~,YAAY,EAAE;~~AACZ~~;~~AACA~~,~~QAAA~~,~~QAAQ~~,EAAE;~~AAFE~~;~~AAFuC~~,~~KAAvB~~;~~AAtB3B~~,~~GAAP~~;~~AA8BD~~,~~CAjCM~~","sourcesContent":["import * as React from 'react';\nimport ~~type~~ { ~~AvatarGroupProps,~~ ~~AvatarGroupState~~ } from '~~./AvatarGroup.types~~';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ~~PopoverSurface~~ } from '@fluentui/react-~~popover~~';\nimport { ~~Button~~ } from '@fluentui/react-~~button~~';\nimport { ~~avatarGroupDefaultStrings~~ } from './AvatarGroup.~~strings~~';\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 { children, ~~strings~~ = ~~avatarGroupDefaultStrings~~ } = props;\n\n ~~return~~ {~~\n //~~ ~~TODO~~: ~~Replace~~ ~~with~~ ~~actual~~ ~~logic.\~~n ~~tooltipContent:~~ ~~strings~~.~~tooltipContent~~.~~replace~~('~~{numOverflowedAvatars}~~', ~~String~~(10)),\n ~~components:~~ {\n // ~~TODO~~ ~~add each slot~~'s ~~element~~ type or ~~component~~\n ~~root:~~ '~~div~~',\n ~~popoverSurface:~~ ~~PopoverSurface,\~~n ~~popoverTrigger:~~ ~~Button,\~~n },\n // ~~TODO~~ ~~add~~ ~~appropriate~~ ~~slots,~~ ~~for~~ ~~example:\~~n // ~~mySlot:~~ ~~resolveShorthand~~(~~props~~.~~mySlot~~),\n ~~root~~: getNativeElementProps('div', {\n ~~ref~~,\n ...props,\n }),\n ~~popoverTrigger:~~ resolveShorthand(props.~~popoverTrigger~~, {\n required: true,\n defaultProps: {\n ~~// TODO: Update~~ children~~\n children~~: ~~'+10'~~,\n },\n }),\n ~~popoverSurface:~~ resolveShorthand(props.~~popoverSurface~~, {\n required: true,\n defaultProps: {\n // ~~TODO~~: ~~Update~~ ~~children~~\n ~~children~~: ~~children~~,\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\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 { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n const childrenArray = React.Children.toArray(children);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem)\n ) {\n // eslint-disable-next-line no-console\n console.warn(\"AvatarGroup's children must be of type AvatarGroupItems.\");\n }\n\n let rootChildren = childrenArray;\n let overflowChildren;\n let overflowButtonChildren;\n\n if (layout === 'pie') {\n rootChildren = childrenArray.slice(0, 3);\n overflowChildren = childrenArray;\n } else if (childrenArray.length > maxAvatars) {\n const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n rootChildren = childrenArray.slice(numOfAvatarsToHide);\n overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n if (overflowIndicator === 'icon') {\n overflowButtonChildren = <MoreHorizontalRegular />;\n } else {\n overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n }\n }\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n children: rootChildren,\n },\n ['size'],\n );\n\n const overflowButton = resolveShorthand(props.overflowButton, {\n required: true,\n defaultProps: {\n children: overflowButtonChildren,\n },\n });\n\n const overflowContent = resolveShorthand(props.overflowContent, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n children: overflowChildren,\n role: 'list',\n tabIndex: 0,\n },\n });\n\n return {\n nonOverflowAvatarsCount: rootChildren.length,\n hasOverflow: !!overflowChildren,\n layout,\n overflowIndicator,\n size,\n tooltipContent: 'View more people.',\n\n components: {\n root: 'div',\n overflowContent: PopoverSurface,\n overflowButton: 'button',\n },\n\n root,\n overflowButton,\n overflowContent,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}