@fluentui/react-avatar 9.0.3 → 9.1.0

package/lib/components/AvatarGroup/useAvatarGroupStyles.js

@@ -1,13 +1,8 @@
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 import { useSizeStyles } from '../Avatar/useAvatarStyles';
-import { useGroupChildClassName } from '../../AvatarGroupItem';
 export const avatarGroupClassNames = {
-  root: 'fui-AvatarGroup',
-  overflowContent: 'fui-AvatarGroup__overflowContent',
-  overflowButton: 'fui-AvatarGroup__overflowButton',
-  overflowSurface: 'fui-AvatarGroup__overflowSurface'
+  root: 'fui-AvatarGroup'
 };
 /**
  * Styles for the root slot.
@@ -22,208 +17,13 @@ const useStyles = /*#__PURE__*/__styles({
     "Bgl5zvf": "f1uz6ud1",
     "De3pzq": "f1ganh6p",
     "Bsw6fvg": "fe2ae1k"
-  },
-  "overflowSurface": {
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"]
-  },
-  "overflowContent": {
-    "Bxyxcbc": "fopcw2o",
-    "sshi5w": "f1n5o1gx",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "fqkkaap",
-    "z8tnut": "f17mpqex",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "fdvome7",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "a9b677": "f13dwy2t"
   }
 }, {
-  "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);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f13dwy2t{width:220px;}"],
+  "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)"
   }]]
 });
-/**
- * Styles for overflow button slot.
- */
-
-
-const useOverflowButtonStyles = /*#__PURE__*/__styles({
-  "base": {
-    "mc9l5x": "ftuwxu6",
-    "qhf8xq": "f10pi13n",
-    "Bnnss6s": "fi64zpg",
-    "Brf1p80": "f4d9j23",
-    "Bt984gj": "f122n59",
-    "sj55zd": "f19n0e5",
-    "De3pzq": "fxugw4r",
-    "g2u3we": "fj3muxo",
-    "h3c5rm": ["f1akhkt", "f1lxtadh"],
-    "B9xav0g": "f1aperda",
-    "zhjwy3": ["f1lxtadh", "f1akhkt"],
-    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
-    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
-    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
-    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "Bjwas2f": "fw33nwi",
-    "Bn1d65q": ["f1ptkjjm", "fmzzjfk"],
-    "Bxeuatn": "f15j0dln",
-    "n51gp8": ["fmzzjfk", "f1ptkjjm"]
-  },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "Bnmjwt4": "flfsvnh",
-    "Jopkrh": ["f1781m5e", "flvaaa9"],
-    "hhrs2v": "f50u1b5",
-    "B7jbng7": ["flvaaa9", "f1781m5e"],
-    "Bh48x57": "foqs3zz",
-    "B32s92o": "fgeg2qa",
-    "B5hngm5": "fhcq1yo"
-  },
-  "pieFocusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "rkqiyj": "f1gx8lax",
-    "Bs3nqqt": ["f1as8ps8", "f17o1ya2"],
-    "B4mky7d": "f1amggu6",
-    "Bviepcv": ["f17o1ya2", "f1as8ps8"],
-    "Bc28wk5": "flnfwa4",
-    "w1edd7": ["fuav46a", "fcnogh1"],
-    "Ba8awiv": "f19zilzp",
-    "I50xcx": ["fcnogh1", "fuav46a"],
-    "Bnmjwt4": "f119w1j1",
-    "Jopkrh": ["f1wlf18u", "fcqg1ja"],
-    "hhrs2v": "ft77uen",
-    "B7jbng7": ["fcqg1ja", "f1wlf18u"]
-  },
-  "states": {
-    "Bi91k9c": "feu1g3u",
-    "Jwef8y": "f1knas48",
-    "Bgoe8wy": "fvcxoqz",
-    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
-    "oetu4i": "f1xlaoq0",
-    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
-    "lj723h": "f1g4hkjv",
-    "ecr2s2": "fb40n2d",
-    "B6oc9vd": "fvs00aa",
-    "ak43y8": ["f1assf6x", "f4ruux4"],
-    "wmxk5l": "fumykes",
-    "B50zh58": ["f4ruux4", "f1assf6x"]
-  },
-  "pie": {
-    "De3pzq": "f1c21dwh",
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
-    "sj55zd": "f44pa96"
-  },
-  "icon12": {
-    "Be2twd7": "f1ugzwwg"
-  },
-  "icon16": {
-    "Be2twd7": "f4ybsrx"
-  },
-  "icon20": {
-    "Be2twd7": "fe5j1ua"
-  },
-  "icon24": {
-    "Be2twd7": "f1rt2boy"
-  },
-  "icon28": {
-    "Be2twd7": "f24l1pt"
-  },
-  "icon32": {
-    "Be2twd7": "ffl51b"
-  },
-  "icon48": {
-    "Be2twd7": "f18m8u13"
-  },
-  "caption2Strong": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "f13mqy1h",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "fcpl73t"
-  },
-  "caption1Strong": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fy9rknc",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "fwrc4pm"
-  },
-  "body1Strong": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "f1i3iumi"
-  },
-  "subtitle2": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fod5ikn",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "faaz57k"
-  },
-  "subtitle1": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "f1pp30po",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "f106mvju"
-  },
-  "title3": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "f1x0m3f5",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "fb86gi6"
-  },
-  "borderThin": {
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"]
-  },
-  "borderThick": {
-    "B4j52fo": "f18zi460",
-    "Bekrc4i": ["f1wpluaz", "fsfsuhs"],
-    "Bn0qgzm": "fmklw6v",
-    "ibv6hh": ["fsfsuhs", "f1wpluaz"]
-  },
-  "borderThicker": {
-    "B4j52fo": "fgx37oo",
-    "Bekrc4i": ["f130t4y6", "f1efpmoh"],
-    "Bn0qgzm": "fv51ejd",
-    "ibv6hh": ["f1efpmoh", "f130t4y6"]
-  },
-  "borderThickest": {
-    "B4j52fo": "fwn6jck",
-    "Bekrc4i": ["figl7jc", "f1g0iy8l"],
-    "Bn0qgzm": "f1b8shu7",
-    "ibv6hh": ["f1g0iy8l", "figl7jc"]
-  }
-}, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gx8lax:focus{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1as8ps8:focus{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f17o1ya2:focus{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1amggu6:focus{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f119w1j1:focus{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1wlf18u:focus{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fcqg1ja:focus{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .ft77uen:focus{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
-  "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f15j0dln{border-bottom-color:CanvasText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fmzzjfk{border-left-color:CanvasText;}.f1ptkjjm{border-right-color:CanvasText;}}", {
-    "m": "(forced-colors: active)"
-  }]],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "h": [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
-  "a": [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
-});
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */
@@ -232,71 +32,11 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
 export const useAvatarGroupStyles_unstable = state => {
   const {
     layout,
-    overflowIndicator,
     size
   } = state;
   const styles = useStyles();
   const sizeStyles = useSizeStyles();
-  const overflowButtonStyles = useOverflowButtonStyles();
-  const groupChildClassName = useGroupChildClassName(layout, size, true);
-  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], state.root.className);
-
-  if (state.overflowContent) {
-    state.overflowContent.className = mergeClasses(avatarGroupClassNames.overflowContent, styles.overflowContent, state.overflowContent.className);
-  }
-
-  if (state.overflowSurface) {
-    state.overflowSurface.className = mergeClasses(avatarGroupClassNames.overflowSurface, styles.overflowSurface, state.overflowSurface.className);
-  }
-
-  const overflowButtonClasses = [];
-
-  if (size < 36) {
-    overflowButtonClasses.push(overflowButtonStyles.borderThin);
-  } else if (size < 56) {
-    overflowButtonClasses.push(overflowButtonStyles.borderThick);
-  } else if (size < 72) {
-    overflowButtonClasses.push(overflowButtonStyles.borderThicker);
-  } else {
-    overflowButtonClasses.push(overflowButtonStyles.borderThickest);
-  }
-
-  if (overflowIndicator === 'count') {
-    if (size <= 24) {
-      overflowButtonClasses.push(overflowButtonStyles.caption2Strong);
-    } else if (size <= 28) {
-      overflowButtonClasses.push(overflowButtonStyles.caption1Strong);
-    } else if (size <= 40) {
-      overflowButtonClasses.push(overflowButtonStyles.body1Strong);
-    } else if (size <= 56) {
-      overflowButtonClasses.push(overflowButtonStyles.subtitle2);
-    } else if (size <= 96) {
-      overflowButtonClasses.push(overflowButtonStyles.subtitle1);
-    } else {
-      overflowButtonClasses.push(overflowButtonStyles.title3);
-    }
-  } else {
-    if (size <= 16) {
-      overflowButtonClasses.push(overflowButtonStyles.icon12);
-    } else if (size <= 24) {
-      overflowButtonClasses.push(overflowButtonStyles.icon16);
-    } else if (size <= 40) {
-      overflowButtonClasses.push(overflowButtonStyles.icon20);
-    } else if (size <= 48) {
-      overflowButtonClasses.push(overflowButtonStyles.icon24);
-    } else if (size <= 56) {
-      overflowButtonClasses.push(overflowButtonStyles.icon28);
-    } else if (size <= 72) {
-      overflowButtonClasses.push(overflowButtonStyles.icon32);
-    } else {
-      overflowButtonClasses.push(overflowButtonStyles.icon48);
-    }
-  }
-
-  if (state.overflowButton) {
-    state.overflowButton.className = mergeClasses(avatarGroupClassNames.overflowButton, sizeStyles[size], overflowButtonStyles.base, ...overflowButtonClasses, layout !== 'pie' && overflowButtonStyles.states, layout !== 'pie' && overflowButtonStyles.focusIndicator, layout === 'pie' && overflowButtonStyles.pieFocusIndicator, layout === 'pie' && overflowButtonStyles.pie, groupChildClassName, state.overflowButton.className);
-  }
-
+  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);
   return state;
 };
 //# sourceMappingURL=useAvatarGroupStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n  overflowContent: 'fui-AvatarGroup__overflowContent',\n  overflowButton: 'fui-AvatarGroup__overflowButton',\n  overflowSurface: 'fui-AvatarGroup__overflowSurface',\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  overflowSurface: {\n    ...shorthands.padding(0),\n  },\n  overflowContent: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    width: '220px',\n  },\n});\n\n/**\n * Styles for overflow button slot.\n */\nconst useOverflowButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    flexShrink: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.padding(0),\n\n    // match color to Avatar's outline color\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('CanvasText'),\n    },\n  },\n\n  // These styles match the default button styles\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n  }),\n\n  // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n  pieFocusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n  }),\n\n  states: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n\n  pie: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: 'transparent',\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  caption2Strong: { ...typographyStyles.caption2Strong },\n  caption1Strong: { ...typographyStyles.caption1Strong },\n  body1Strong: { ...typographyStyles.body1Strong },\n  subtitle2: { ...typographyStyles.subtitle2 },\n  subtitle1: { ...typographyStyles.subtitle1 },\n  title3: { ...typographyStyles.title3 },\n  borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n  borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n  borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n  borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\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, overflowIndicator, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowButtonStyles = useOverflowButtonStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && styles.pie,\n    layout === 'pie' && sizeStyles[size],\n    state.root.className,\n  );\n\n  if (state.overflowContent) {\n    state.overflowContent.className = mergeClasses(\n      avatarGroupClassNames.overflowContent,\n      styles.overflowContent,\n      state.overflowContent.className,\n    );\n  }\n\n  if (state.overflowSurface) {\n    state.overflowSurface.className = mergeClasses(\n      avatarGroupClassNames.overflowSurface,\n      styles.overflowSurface,\n      state.overflowSurface.className,\n    );\n  }\n\n  const overflowButtonClasses = [];\n\n  if (size < 36) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThin);\n  } else if (size < 56) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThick);\n  } else if (size < 72) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n  } else {\n    overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n  }\n\n  if (overflowIndicator === 'count') {\n    if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n    } else if (size <= 28) {\n      overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n    } else if (size <= 96) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.title3);\n    }\n  } else {\n    if (size <= 16) {\n      overflowButtonClasses.push(overflowButtonStyles.icon12);\n    } else if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.icon16);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.icon20);\n    } else if (size <= 48) {\n      overflowButtonClasses.push(overflowButtonStyles.icon24);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.icon28);\n    } else if (size <= 72) {\n      overflowButtonClasses.push(overflowButtonStyles.icon32);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.icon48);\n    }\n  }\n\n  if (state.overflowButton) {\n    state.overflowButton.className = mergeClasses(\n      avatarGroupClassNames.overflowButton,\n      sizeStyles[size],\n      overflowButtonStyles.base,\n      ...overflowButtonClasses,\n      layout !== 'pie' && overflowButtonStyles.states,\n      layout !== 'pie' && overflowButtonStyles.focusIndicator,\n      layout === 'pie' && overflowButtonStyles.pieFocusIndicator,\n      layout === 'pie' && overflowButtonStyles.pie,\n      groupChildClassName,\n      state.overflowButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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/"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useAvatarGroupItem_unstable } from './useAvatarGroupItem';
 import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';
+import { useAvatarGroupItem_unstable } from './useAvatarGroupItem';
 import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';
 /**
  * The AvatarGroupItem component represents a single person or entity.

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/AvatarGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;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 { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\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/"}
+{"version":3,"sources":["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/"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupItem.types.js","sourceRoot":"../src/","sources":["components/AvatarGroupItem/AvatarGroupItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Avatar, AvatarSizes } from '../../Avatar';\nimport { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  nonOverflowAvatarsCount: number;\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSizes;\n};\n"]}
+{"version":3,"file":"AvatarGroupItem.types.js","sourceRoot":"../src/","sources":["components/AvatarGroupItem/AvatarGroupItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSizes } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSizes;\n};\n"]}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -1,8 +1,8 @@
 import { Avatar } from '../Avatar/Avatar';
-import { AvatarGroupContext } from '../../contexts/AvatarGroupContext';
+import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
 import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
 import { resolveShorthand } from '@fluentui/react-utilities';
-import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
+import { useHasParentContext } from '@fluentui/react-context-selector';
 /**
  * Create the state required to render AvatarGroupItem.
  *
@@ -14,10 +14,9 @@ import { useContextSelector, useHasParentContext } from '@fluentui/react-context
  */
 
 export const useAvatarGroupItem_unstable = (props, ref) => {
-  const nonOverflowAvatarsCount = useContextSelector(AvatarGroupContext, ctx => ctx.nonOverflowAvatarsCount);
-  const groupIsOverflow = useContextSelector(AvatarGroupContext, ctx => ctx.isOverflow);
-  const layout = useContextSelector(AvatarGroupContext, ctx => ctx.layout);
-  const groupSize = useContextSelector(AvatarGroupContext, ctx => ctx.size); // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
+  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 {
     style,
@@ -33,12 +32,11 @@ export const useAvatarGroupItem_unstable = (props, ref) => {
   }
 
   return {
-    nonOverflowAvatarsCount: nonOverflowAvatarsCount !== null && nonOverflowAvatarsCount !== void 0 ? nonOverflowAvatarsCount : 1,
+    isOverflowItem: groupIsOverflow,
     layout,
     size,
-    isOverflowItem: groupIsOverflow,
     components: {
-      root: 'div',
+      root: groupIsOverflow ? 'li' : 'div',
       avatar: Avatar,
       overflowLabel: 'span'
     },
@@ -46,8 +44,7 @@ export const useAvatarGroupItem_unstable = (props, ref) => {
       required: true,
       defaultProps: {
         style,
-        className,
-        role: groupIsOverflow ? 'listitem' : undefined
+        className
       }
     }),
     avatar: resolveShorthand(props.avatar, {
@@ -62,6 +59,8 @@ export const useAvatarGroupItem_unstable = (props, ref) => {
     overflowLabel: resolveShorthand(props.overflowLabel, {
       required: true,
       defaultProps: {
+        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
+        'aria-hidden': true,
         children: props.name
       }
     })

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AACA,SAAS,sBAAT,QAAuC,+BAAvC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,uBAAhC,CAAlD;EACA,MAAM,eAAe,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,UAAhC,CAA1C;EACA,MAAM,MAAM,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,MAAhC,CAAjC;EACA,MAAM,SAAS,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,IAAhC,CAApC,CAJwB,CAKxB;;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,uBAAuB,EAAE,uBAAuB,KAAA,IAAvB,IAAA,uBAAuB,KAAA,KAAA,CAAvB,GAAA,uBAAA,GAA2B,CAD/C;IAEL,MAFK;IAGL,IAHK;IAIL,cAAc,EAAE,eAJX;IAKL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,MAFE;MAGV,aAAa,EAAE;IAHL,CALP;IAUL,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,KADY;QAEZ,SAFY;QAGZ,IAAI,EAAE,eAAe,GAAG,UAAH,GAAgB;MAHzB;IAFmB,CAAb,CAVjB;IAkBL,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,CAlBnB;IA2BL,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,EAAsB;MACnD,QAAQ,EAAE,IADyC;MAEnD,YAAY,EAAE;QACZ,QAAQ,EAAE,KAAK,CAAC;MADJ;IAFqC,CAAtB;EA3B1B,CAAP;AAkCD,CApDM","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useContextSelector, 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 nonOverflowAvatarsCount = useContextSelector(AvatarGroupContext, ctx => ctx.nonOverflowAvatarsCount);\n  const groupIsOverflow = useContextSelector(AvatarGroupContext, ctx => ctx.isOverflow);\n  const layout = useContextSelector(AvatarGroupContext, ctx => ctx.layout);\n  const groupSize = useContextSelector(AvatarGroupContext, ctx => ctx.size);\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    nonOverflowAvatarsCount: nonOverflowAvatarsCount ?? 1,\n    layout,\n    size,\n    isOverflowItem: groupIsOverflow,\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n        role: groupIsOverflow ? 'listitem' : undefined,\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        children: props.name,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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/"}