@fluentui/react-avatar 9.0.0-rc.9 → 9.0.0

package/lib/components/AvatarGroup/useAvatarGroupStyles.js

@@ -1,35 +1,294 @@
-import { __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useSizeStyles } from '../Avatar/useAvatarStyles';
+import { useGroupChildClassName } from '../../AvatarGroupItem';
 export const avatarGroupClassNames = {
   root: 'fui-AvatarGroup',
-  popoverSurface: 'fui-AvatarGroup__popoverSurface',
-  popoverTrigger: 'fui-AvatarGroup__popoverTrigger'
-};
-export const extraAvatarGroupClassNames = {
-  popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem'
+  overflowContent: 'fui-AvatarGroup__overflowContent',
+  overflowButton: 'fui-AvatarGroup__overflowButton'
 };
 /**
- * Styles for the root slot
+ * Styles for the root slot.
  */
 
 const useStyles = /*#__PURE__*/__styles({
-  "root": {}
-}, {});
+  "base": {
+    "mc9l5x": "ftuwxu6",
+    "qhf8xq": "f10pi13n"
+  },
+  "pie": {
+    "Bgl5zvf": "f1uz6ud1",
+    "Bsw6fvg": "fe2ae1k"
+  },
+  "focusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "vchsgm": "fbiesyy",
+    "ozrjjd": ["fq2kn9", "f1jxwnad"],
+    "B7lelfh": "f1il7mou",
+    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
+    "Bk9m21v": "f1m62og4",
+    "Bwehi4c": "f1rrqamn",
+    "H05dg8": "fbcoddx"
+  }
+}, {
+  "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%);}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1m62og4:focus-within{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1rrqamn:focus-within{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fbcoddx:focus-within{outline-style:solid;}"],
+  "m": [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
+    "m": "(forced-colors: active)"
+  }]],
+  "f": [".ftqa4ok:focus{outline-style:none;}"]
+});
+/**
+ * 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"
+  },
+  "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;}", ".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);}"]
+});
+/**
+ * Styles for overflow list slot.
+ */
+
+
+const useOverflowContentStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bxyxcbc": "fopcw2o",
+    "sshi5w": "f1n5o1gx",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "fqkkaap",
+    "z8tnut": "f17mpqex",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "fdvome7",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
+    "a9b677": "f13dwy2t"
+  }
+}, {
+  "d": [".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;}"]
+});
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */
 
 
 export const useAvatarGroupStyles_unstable = state => {
+  const {
+    layout,
+    overflowIndicator,
+    size
+  } = state;
   const styles = useStyles();
-  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className); // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+  const sizeStyles = useSizeStyles();
+  const overflowContentStyles = useOverflowContentStyles();
+  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], layout === 'pie' && styles.focusIndicator, state.root.className);
+
+  if (state.overflowContent) {
+    state.overflowContent.className = mergeClasses(avatarGroupClassNames.overflowContent, overflowContentStyles.base, state.overflowContent.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 (state.popoverSurface) {
-    state.popoverSurface.className = mergeClasses(avatarGroupClassNames.popoverSurface, state.popoverSurface.className);
+  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.popoverTrigger) {
-    state.popoverTrigger.className = mergeClasses(avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);
+  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.pie, groupChildClassName, state.overflowButton.className);
   }
 
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,cAAc,EAAE,iCAFqD;AAGrE,EAAA,cAAc,EAAE;AAHqD,CAAhE;AAMP,OAAO,MAAM,0BAA0B,GAAG;AACxC,EAAA,kBAAkB,EAAE;AADoB,CAAnC;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC,CAFyF,CAIzF;AACA;;AAEA,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAAC,qBAAqB,CAAC,cAAvB,EAAuC,KAAK,CAAC,cAAN,CAAqB,SAA5D,CAA7C;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAAC,qBAAqB,CAAC,cAAvB,EAAuC,KAAK,CAAC,cAAN,CAAqB,SAA5D,CAA7C;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\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  popoverSurface: 'fui-AvatarGroup__popoverSurface',\n  popoverTrigger: 'fui-AvatarGroup__popoverTrigger',\n};\n\nexport const extraAvatarGroupClassNames = {\n  popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  if (state.popoverSurface) {\n    state.popoverSurface.className = mergeClasses(avatarGroupClassNames.popoverSurface, state.popoverSurface.className);\n  }\n\n  if (state.popoverTrigger) {\n    state.popoverTrigger.className = mergeClasses(avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"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};\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    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  focusIndicator: createCustomFocusIndicatorStyle(\n    {\n      ...shorthands.borderColor('transparent'),\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n    },\n    { selector: 'focus-within' },\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  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 * Styles for overflow list slot.\n */\nconst useOverflowContentStyles = makeStyles({\n  base: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    width: '220px',\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, overflowIndicator, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowContentStyles = useOverflowContentStyles();\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    layout === 'pie' && styles.focusIndicator,\n    state.root.className,\n  );\n\n  if (state.overflowContent) {\n    state.overflowContent.className = mergeClasses(\n      avatarGroupClassNames.overflowContent,\n      overflowContentStyles.base,\n      state.overflowContent.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.pie,\n      groupChildClassName,\n      state.overflowButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useAvatarGroupItem_unstable } from './useAvatarGroupItem';
+import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';
+import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';
+/**
+ * The AvatarGroupItem component represents a single person or entity.
+ * AvatarGroupItem should only be used in an AvatarGroup component.
+ */
+
+export const AvatarGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAvatarGroupItem_unstable(props, ref);
+  useAvatarGroupItemStyles_unstable(state);
+  return renderAvatarGroupItem_unstable(state);
+});
+AvatarGroupItem.displayName = 'AvatarGroupItem';
+//# sourceMappingURL=AvatarGroupItem.js.map

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

@@ -0,0 +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/"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AvatarGroupItem.types.js.map

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

@@ -0,0 +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"]}

package/lib/components/AvatarGroupItem/index.js

@@ -0,0 +1,6 @@
+export * from './AvatarGroupItem';
+export * from './AvatarGroupItem.types';
+export * from './renderAvatarGroupItem';
+export * from './useAvatarGroupItem';
+export * from './useAvatarGroupItemStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AvatarGroupItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"]}

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgC;EAC5E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAuB,KAAvB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CADF,EAEG,KAAK,CAAC,cAAN,iBAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAF3B,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -0,0 +1,70 @@
+import { Avatar } from '../Avatar/Avatar';
+import { AvatarGroupContext } from '../../contexts/AvatarGroupContext';
+import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
+/**
+ * Create the state required to render AvatarGroupItem.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ */
+
+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 {
+    style,
+    className,
+    ...avatarSlotProps
+  } = props;
+  const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
+  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
+
+  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
+    // eslint-disable-next-line no-console
+    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
+  }
+
+  return {
+    nonOverflowAvatarsCount: nonOverflowAvatarsCount !== null && nonOverflowAvatarsCount !== void 0 ? nonOverflowAvatarsCount : 1,
+    layout,
+    size,
+    isOverflowItem: groupIsOverflow,
+    components: {
+      root: 'div',
+      avatar: Avatar,
+      overflowLabel: 'span'
+    },
+    root: resolveShorthand(props.root, {
+      required: true,
+      defaultProps: {
+        style,
+        className,
+        role: groupIsOverflow ? 'listitem' : undefined
+      }
+    }),
+    avatar: resolveShorthand(props.avatar, {
+      required: true,
+      defaultProps: {
+        ref,
+        size,
+        color: 'colorful',
+        ...avatarSlotProps
+      }
+    }),
+    overflowLabel: resolveShorthand(props.overflowLabel, {
+      required: true,
+      defaultProps: {
+        children: props.name
+      }
+    })
+  };
+};
+//# sourceMappingURL=useAvatarGroupItem.js.map

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

@@ -0,0 +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/"}