@fluentui/react-avatar 9.0.4 → 9.1.0

package/lib/components/AvatarGroup/useAvatarGroup.js

@@ -1,7 +1,4 @@
-import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { MoreHorizontalRegular } from '@fluentui/react-icons';
-import { PopoverSurface } from '@fluentui/react-popover';
+import { getNativeElementProps } from '@fluentui/react-utilities';
 /**
  * Create the state required to render AvatarGroup.
  *
@@ -14,76 +11,21 @@ import { PopoverSurface } from '@fluentui/react-popover';
 
 export const useAvatarGroup_unstable = (props, ref) => {
   const {
-    children,
     layout = 'spread',
-    maxAvatars = 5,
     size = defaultAvatarGroupSize
   } = props;
-  const {
-    overflowIndicator = size < 24 ? 'icon' : 'count'
-  } = props;
-  const childrenArray = React.Children.toArray(children);
-  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
+    ref
   }, ['size']);
-  const overflowButton = resolveShorthand(props.overflowButton, {
-    required: true,
-    defaultProps: {
-      children: overflowButtonChildren,
-      type: 'button'
-    }
-  });
-  const overflowContent = resolveShorthand(props.overflowContent, {
-    required: true,
-    defaultProps: {
-      'aria-label': 'Overflow',
-      children: overflowChildren,
-      role: 'list',
-      tabIndex: 0
-    }
-  });
-  const overflowSurface = resolveShorthand(props.overflowSurface, {
-    required: true
-  });
   return {
-    nonOverflowAvatarsCount: rootChildren.length,
-    hasOverflow: !!overflowChildren,
     layout,
-    overflowIndicator,
     size,
-    tooltipContent: 'View more people.',
     components: {
-      root: 'div',
-      overflowContent: 'div',
-      overflowButton: 'button',
-      overflowSurface: PopoverSurface
+      root: 'div'
     },
-    root,
-    overflowButton,
-    overflowContent,
-    overflowSurface
+    root
   };
 };
 export const defaultAvatarGroupSize = 32;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,qBAAT,QAAsC,uBAAtC;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,QAArB;IAA+B,UAAU,GAAG,CAA5C;IAA+C,IAAI,GAAG;EAAtD,IAAiF,KAAvF;EACA,MAAM;IAAE,iBAAiB,GAAG,IAAI,GAAG,EAAP,GAAY,MAAZ,GAAqB;EAA3C,IAAuD,KAA7D;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;EAEA,IAAI,YAAY,GAAG,aAAnB;EACA,IAAI,gBAAJ;EACA,IAAI,sBAAJ;;EAEA,IAAI,MAAM,KAAK,KAAf,EAAsB;IACpB,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,CAAvB,CAAf;IACA,gBAAgB,GAAG,aAAnB;EACD,CAHD,MAGO,IAAI,aAAa,CAAC,MAAd,GAAuB,UAA3B,EAAuC;IAC5C,MAAM,kBAAkB,GAAG,aAAa,CAAC,MAAd,GAAuB,UAAvB,GAAoC,CAA/D;IAEA,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,kBAApB,CAAf;IACA,gBAAgB,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,kBAAvB,CAAnB;;IAEA,IAAI,iBAAiB,KAAK,MAA1B,EAAkC;MAChC,sBAAsB,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAzB;IACD,CAFD,MAEO;MACL,sBAAsB,GAAG,kBAAkB,GAAG,EAArB,GAA0B,KAA1B,GAAkC,IAAI,kBAAkB,EAAjF;IACD;EACF;;EAED,MAAM,IAAI,GAAG,qBAAqB,CAChC,KADgC,EAEhC;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE,GAHF;IAIE,QAAQ,EAAE;EAJZ,CAFgC,EAQhC,CAAC,MAAD,CARgC,CAAlC;EAWA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;IAC5D,QAAQ,EAAE,IADkD;IAE5D,YAAY,EAAE;MACZ,QAAQ,EAAE,sBADE;MAEZ,IAAI,EAAE;IAFM;EAF8C,CAAvB,CAAvC;EAQA,MAAM,eAAe,GAAG,gBAAgB,CAAC,KAAK,CAAC,eAAP,EAAwB;IAC9D,QAAQ,EAAE,IADoD;IAE9D,YAAY,EAAE;MACZ,cAAc,UADF;MAEZ,QAAQ,EAAE,gBAFE;MAGZ,IAAI,EAAE,MAHM;MAIZ,QAAQ,EAAE;IAJE;EAFgD,CAAxB,CAAxC;EAUA,MAAM,eAAe,GAAG,gBAAgB,CAAC,KAAK,CAAC,eAAP,EAAwB;IAC9D,QAAQ,EAAE;EADoD,CAAxB,CAAxC;EAIA,OAAO;IACL,uBAAuB,EAAE,YAAY,CAAC,MADjC;IAEL,WAAW,EAAE,CAAC,CAAC,gBAFV;IAGL,MAHK;IAIL,iBAJK;IAKL,IALK;IAML,cAAc,EAAE,mBANX;IAQL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,eAAe,EAAE,KAFP;MAGV,cAAc,EAAE,QAHN;MAIV,eAAe,EAAE;IAJP,CARP;IAeL,IAfK;IAgBL,cAhBK;IAiBL,eAjBK;IAkBL;EAlBK,CAAP;AAoBD,CA9EM;AAgFP,OAAO,MAAM,sBAAsB,GAAG,EAA/B","sourcesContent":["import * as React from 'react';\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  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      type: 'button',\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  const overflowSurface = resolveShorthand(props.overflowSurface, {\n    required: true,\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: 'div',\n      overflowButton: 'button',\n      overflowSurface: PopoverSurface,\n    },\n\n    root,\n    overflowButton,\n    overflowContent,\n    overflowSurface,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,MAAM,GAAG,QAAX;IAAqB,IAAI,GAAG;EAA5B,IAAuD,KAA7D;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAChC,KADgC,EAEhC;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE;EAHF,CAFgC,EAOhC,CAAC,MAAD,CAPgC,CAAlC;EAUA,OAAO;IACL,MADK;IAEL,IAFK;IAGL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAHP;IAML;EANK,CAAP;AAQD,CArBM;AAuBP,OAAO,MAAM,sBAAsB,GAAG,EAA/B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js

@@ -0,0 +1,14 @@
+export const useAvatarGroupContextValues = state => {
+  const {
+    layout,
+    size
+  } = state;
+  const avatarGroup = {
+    layout,
+    size
+  };
+  return {
+    avatarGroup
+  };
+};
+//# sourceMappingURL=useAvatarGroupContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroupContextValues.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAAsD;EAC/F,MAAM;IAAE,MAAF;IAAU;EAAV,IAAmB,KAAzB;EAEA,MAAM,WAAW,GAA4B;IAC3C,MAD2C;IAE3C;EAF2C,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CATM","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}

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,211 +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",
-    "B486eqv": "f2hkw1w",
-    "Bvjrn4i": "fvvvjju",
-    "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
-    "vkx7if": "f3za06g",
-    "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
-    "H7go31": "flnhq9f",
-    "ns4vmj": "f149st4k",
-    "me5axj": "f1tn340u"
-  },
-  "pieFocusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "B7vjy6w": "f16bl5ra",
-    "k9s1gq": ["fdi6dq0", "f1tjf6rm"],
-    "hhz4md": "fexdhnp",
-    "B282cnq": ["f1tjf6rm", "fdi6dq0"],
-    "Bhrp7kx": "frdu0z4",
-    "jt52do": ["ftyr16m", "f6wv3wq"],
-    "qyg4kl": "fmjz5p8",
-    "aw8gdl": ["f6wv3wq", "ftyr16m"],
-    "Bvjrn4i": "ftvba00",
-    "Bfjx6ro": ["fqg29le", "f1io5jdi"],
-    "vkx7if": "fak3yh7",
-    "Bhdpb9s": ["f1io5jdi", "fqg29le"]
-  },
-  "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;}", ".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .flnhq9f.fui-focus-visible{outline-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f149st4k.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1tn340u.fui-focus-visible{outline-style:solid;}", ".fui-FluentProvider .f16bl5ra.fui-focus-visible{border-top-width:var(--strokeWidthThick);}", ".fui-FluentProvider .fdi6dq0.fui-focus-visible{border-right-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1tjf6rm.fui-focus-visible{border-left-width:var(--strokeWidthThick);}", ".fui-FluentProvider .fexdhnp.fui-focus-visible{border-bottom-width:var(--strokeWidthThick);}", ".fui-FluentProvider .frdu0z4.fui-focus-visible{border-top-style:solid;}", ".fui-FluentProvider .ftyr16m.fui-focus-visible{border-right-style:solid;}", ".fui-FluentProvider .f6wv3wq.fui-focus-visible{border-left-style:solid;}", ".fui-FluentProvider .fmjz5p8.fui-focus-visible{border-bottom-style:solid;}", ".fui-FluentProvider .ftvba00.fui-focus-visible{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fqg29le.fui-focus-visible{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1io5jdi.fui-focus-visible{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fak3yh7.fui-focus-visible{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;}"],
-  "i": [".f2hkw1w:focus-visible{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
  */
@@ -235,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/"}