@fluentui/react-avatar 9.0.0 → 9.0.3

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,eAAT,QAAgC,oCAAhC;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,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IACA,aAAa,CAAC,IAAd,CAAmB,KAAK,IAAI,aAAA,KAAK,CAAC,cAAN,CAAqB,KAArB,KAA+B,KAAK,CAAC,IAAN,KAAe,eAA1E,CAFF,EAGE;IACA;IACA,OAAO,CAAC,IAAR,CAAa,0DAAb;EACD;;EAED,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;IADE;EAF8C,CAAvB,CAAvC;EAOA,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,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,cAFP;MAGV,cAAc,EAAE;IAHN,CARP;IAcL,IAdK;IAeL,cAfK;IAgBL;EAhBK,CAAP;AAkBD,CA/EM;AAiFP,OAAO,MAAM,sBAAsB,GAAG,EAA/B","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n  const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n  const childrenArray = React.Children.toArray(children);\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem)\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\"AvatarGroup's children must be of type AvatarGroupItems.\");\n  }\n\n  let rootChildren = childrenArray;\n  let overflowChildren;\n  let overflowButtonChildren;\n\n  if (layout === 'pie') {\n    rootChildren = childrenArray.slice(0, 3);\n    overflowChildren = childrenArray;\n  } else if (childrenArray.length > maxAvatars) {\n    const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n    rootChildren = childrenArray.slice(numOfAvatarsToHide);\n    overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n    if (overflowIndicator === 'icon') {\n      overflowButtonChildren = <MoreHorizontalRegular />;\n    } else {\n      overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n    }\n  }\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n      children: rootChildren,\n    },\n    ['size'],\n  );\n\n  const overflowButton = resolveShorthand(props.overflowButton, {\n    required: true,\n    defaultProps: {\n      children: overflowButtonChildren,\n    },\n  });\n\n  const overflowContent = resolveShorthand(props.overflowContent, {\n    required: true,\n    defaultProps: {\n      'aria-label': 'Overflow',\n      children: overflowChildren,\n      role: 'list',\n      tabIndex: 0,\n    },\n  });\n\n  return {\n    nonOverflowAvatarsCount: rootChildren.length,\n    hasOverflow: !!overflowChildren,\n    layout,\n    overflowIndicator,\n    size,\n    tooltipContent: 'View more people.',\n\n    components: {\n      root: 'div',\n      overflowContent: PopoverSurface,\n      overflowButton: 'button',\n    },\n\n    root,\n    overflowButton,\n    overflowContent,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}
+{"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/"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.js

@@ -6,7 +6,8 @@ import { useGroupChildClassName } from '../../AvatarGroupItem';
 export const avatarGroupClassNames = {
   root: 'fui-AvatarGroup',
   overflowContent: 'fui-AvatarGroup__overflowContent',
-  overflowButton: 'fui-AvatarGroup__overflowButton'
+  overflowButton: 'fui-AvatarGroup__overflowButton',
+  overflowSurface: 'fui-AvatarGroup__overflowSurface'
 };
 /**
  * Styles for the root slot.
@@ -19,24 +20,31 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "pie": {
     "Bgl5zvf": "f1uz6ud1",
+    "De3pzq": "f1ganh6p",
     "Bsw6fvg": "fe2ae1k"
   },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "vchsgm": "fbiesyy",
-    "ozrjjd": ["fq2kn9", "f1jxwnad"],
-    "B7lelfh": "f1il7mou",
-    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
-    "Bk9m21v": "f1m62og4",
-    "Bwehi4c": "f1rrqamn",
-    "H05dg8": "fbcoddx"
+  "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%);}", "[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;}"],
+  "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;}"],
   "m": [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
-  }]],
-  "f": [".ftqa4ok:focus{outline-style:none;}"]
+  }]]
 });
 /**
  * Styles for overflow button slot.
@@ -83,6 +91,21 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
     "B32s92o": "fgeg2qa",
     "B5hngm5": "fhcq1yo"
   },
+  "pieFocusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "rkqiyj": "f1gx8lax",
+    "Bs3nqqt": ["f1as8ps8", "f17o1ya2"],
+    "B4mky7d": "f1amggu6",
+    "Bviepcv": ["f17o1ya2", "f1as8ps8"],
+    "Bc28wk5": "flnfwa4",
+    "w1edd7": ["fuav46a", "fcnogh1"],
+    "Ba8awiv": "f19zilzp",
+    "I50xcx": ["fcnogh1", "fuav46a"],
+    "Bnmjwt4": "f119w1j1",
+    "Jopkrh": ["f1wlf18u", "fcqg1ja"],
+    "hhrs2v": "ft77uen",
+    "B7jbng7": ["fcqg1ja", "f1wlf18u"]
+  },
   "states": {
     "Bi91k9c": "feu1g3u",
     "Jwef8y": "f1knas48",
@@ -187,7 +210,7 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
     "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);}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gx8lax:focus{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1as8ps8:focus{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f17o1ya2:focus{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1amggu6:focus{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f119w1j1:focus{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1wlf18u:focus{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fcqg1ja:focus{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .ft77uen:focus{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
   "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
@@ -201,26 +224,6 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
   "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
  */
@@ -234,13 +237,16 @@ export const useAvatarGroupStyles_unstable = state => {
   } = state;
   const styles = useStyles();
   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);
+  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, overflowContentStyles.base, state.overflowContent.className);
+    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 = [];
@@ -288,7 +294,7 @@ export const useAvatarGroupStyles_unstable = state => {
   }
 
   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);
+    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);
   }
 
   return state;

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};\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/"}
+{"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/"}

package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js

@@ -36,21 +36,22 @@ const renderAvatarGroup_unstable = state => {
       nonOverflowAvatarsCount
     }
   }, React.createElement(slots.root, { ...slotProps.root
-  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && React.createElement(react_popover_1.Popover, {
+  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && slots.overflowSurface && React.createElement(react_popover_1.Popover, {
     trapFocus: true,
     size: "small"
   }, React.createElement(react_popover_1.PopoverTrigger, null, React.createElement(react_tooltip_1.Tooltip, {
     content: state.tooltipContent,
     relationship: "label"
   }, React.createElement(slots.overflowButton, { ...slotProps.overflowButton
-  }))), React.createElement(AvatarGroupContext_1.AvatarGroupContext.Provider, {
+  }))), React.createElement(slots.overflowSurface, { ...slotProps.overflowSurface
+  }, React.createElement(AvatarGroupContext_1.AvatarGroupContext.Provider, {
     value: {
       isOverflow: true,
       layout,
       size: 24
     }
   }, React.createElement(slots.overflowContent, { ...slotProps.overflowContent
-  })))));
+  }))))));
 };
 
 exports.renderAvatarGroup_unstable = renderAvatarGroup_unstable;

package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,IACC,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CANF,CAHJ,CADF,CADF;AAmBD,CAvBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n  const { layout, size, nonOverflowAvatarsCount } = state;\n\n  return (\n    <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n      <slots.root {...slotProps.root}>\n        {state.root.children}\n        {state.hasOverflow && slots.overflowButton && slots.overflowContent && (\n          <Popover trapFocus size=\"small\">\n            <PopoverTrigger>\n              <Tooltip content={state.tooltipContent} relationship=\"label\">\n                <slots.overflowButton {...slotProps.overflowButton} />\n              </Tooltip>\n            </PopoverTrigger>\n            <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n              <slots.overflowContent {...slotProps.overflowContent} />\n            </AvatarGroupContext.Provider>\n          </Popover>\n        )}\n      </slots.root>\n    </AvatarGroupContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,IAAsE,KAAK,CAAC,eAA5E,IACC,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CADF,CANF,CAHJ,CADF,CADF;AAqBD,CAzBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n  const { layout, size, nonOverflowAvatarsCount } = state;\n\n  return (\n    <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n      <slots.root {...slotProps.root}>\n        {state.root.children}\n        {state.hasOverflow && slots.overflowButton && slots.overflowContent && slots.overflowSurface && (\n          <Popover trapFocus size=\"small\">\n            <PopoverTrigger>\n              <Tooltip content={state.tooltipContent} relationship=\"label\">\n                <slots.overflowButton {...slotProps.overflowButton} />\n              </Tooltip>\n            </PopoverTrigger>\n            <slots.overflowSurface {...slotProps.overflowSurface}>\n              <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n                <slots.overflowContent {...slotProps.overflowContent} />\n              </AvatarGroupContext.Provider>\n            </slots.overflowSurface>\n          </Popover>\n        )}\n      </slots.root>\n    </AvatarGroupContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js

@@ -7,8 +7,6 @@ exports.defaultAvatarGroupSize = exports.useAvatarGroup_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
-const AvatarGroupItem_1 = /*#__PURE__*/require("../AvatarGroupItem/AvatarGroupItem");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
@@ -36,12 +34,6 @@ const useAvatarGroup_unstable = (props, ref) => {
     overflowIndicator = size < 24 ? 'icon' : 'count'
   } = props;
   const childrenArray = React.Children.toArray(children);
-
-  if (process.env.NODE_ENV !== 'production' && childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem_1.AvatarGroupItem)) {
-    // eslint-disable-next-line no-console
-    console.warn("AvatarGroup's children must be of type AvatarGroupItems.");
-  }
-
   let rootChildren = childrenArray;
   let overflowChildren;
   let overflowButtonChildren;
@@ -70,7 +62,8 @@ const useAvatarGroup_unstable = (props, ref) => {
   const overflowButton = react_utilities_1.resolveShorthand(props.overflowButton, {
     required: true,
     defaultProps: {
-      children: overflowButtonChildren
+      children: overflowButtonChildren,
+      type: 'button'
     }
   });
   const overflowContent = react_utilities_1.resolveShorthand(props.overflowContent, {
@@ -82,6 +75,9 @@ const useAvatarGroup_unstable = (props, ref) => {
       tabIndex: 0
     }
   });
+  const overflowSurface = react_utilities_1.resolveShorthand(props.overflowSurface, {
+    required: true
+  });
   return {
     nonOverflowAvatarsCount: rootChildren.length,
     hasOverflow: !!overflowChildren,
@@ -91,12 +87,14 @@ const useAvatarGroup_unstable = (props, ref) => {
     tooltipContent: 'View more people.',
     components: {
       root: 'div',
-      overflowContent: react_popover_1.PopoverSurface,
-      overflowButton: 'button'
+      overflowContent: 'div',
+      overflowButton: 'button',
+      overflowSurface: react_popover_1.PopoverSurface
     },
     root,
     overflowButton,
-    overflowContent
+    overflowContent,
+    overflowSurface
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n  const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n  const childrenArray = React.Children.toArray(children);\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem)\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\"AvatarGroup's children must be of type AvatarGroupItems.\");\n  }\n\n  let rootChildren = childrenArray;\n  let overflowChildren;\n  let overflowButtonChildren;\n\n  if (layout === 'pie') {\n    rootChildren = childrenArray.slice(0, 3);\n    overflowChildren = childrenArray;\n  } else if (childrenArray.length > maxAvatars) {\n    const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n    rootChildren = childrenArray.slice(numOfAvatarsToHide);\n    overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n    if (overflowIndicator === 'icon') {\n      overflowButtonChildren = <MoreHorizontalRegular />;\n    } else {\n      overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n    }\n  }\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n      children: rootChildren,\n    },\n    ['size'],\n  );\n\n  const overflowButton = resolveShorthand(props.overflowButton, {\n    required: true,\n    defaultProps: {\n      children: overflowButtonChildren,\n    },\n  });\n\n  const overflowContent = resolveShorthand(props.overflowContent, {\n    required: true,\n    defaultProps: {\n      'aria-label': 'Overflow',\n      children: overflowChildren,\n      role: 'list',\n      tabIndex: 0,\n    },\n  });\n\n  return {\n    nonOverflowAvatarsCount: rootChildren.length,\n    hasOverflow: !!overflowChildren,\n    layout,\n    overflowIndicator,\n    size,\n    tooltipContent: 'View more people.',\n\n    components: {\n      root: 'div',\n      overflowContent: PopoverSurface,\n      overflowButton: 'button',\n    },\n\n    root,\n    overflowButton,\n    overflowContent,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"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","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/"}

package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js

@@ -18,7 +18,8 @@ const AvatarGroupItem_1 = /*#__PURE__*/require("../../AvatarGroupItem");
 exports.avatarGroupClassNames = {
   root: 'fui-AvatarGroup',
   overflowContent: 'fui-AvatarGroup__overflowContent',
-  overflowButton: 'fui-AvatarGroup__overflowButton'
+  overflowButton: 'fui-AvatarGroup__overflowButton',
+  overflowSurface: 'fui-AvatarGroup__overflowSurface'
 };
 /**
  * Styles for the root slot.
@@ -31,24 +32,31 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   },
   "pie": {
     "Bgl5zvf": "f1uz6ud1",
+    "De3pzq": "f1ganh6p",
     "Bsw6fvg": "fe2ae1k"
   },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "vchsgm": "fbiesyy",
-    "ozrjjd": ["fq2kn9", "f1jxwnad"],
-    "B7lelfh": "f1il7mou",
-    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
-    "Bk9m21v": "f1m62og4",
-    "Bwehi4c": "f1rrqamn",
-    "H05dg8": "fbcoddx"
+  "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%);}", "[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;}"],
+  "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;}"],
   "m": [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
-  }]],
-  "f": [".ftqa4ok:focus{outline-style:none;}"]
+  }]]
 });
 /**
  * Styles for overflow button slot.
@@ -95,6 +103,21 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
     "B32s92o": "fgeg2qa",
     "B5hngm5": "fhcq1yo"
   },
+  "pieFocusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "rkqiyj": "f1gx8lax",
+    "Bs3nqqt": ["f1as8ps8", "f17o1ya2"],
+    "B4mky7d": "f1amggu6",
+    "Bviepcv": ["f17o1ya2", "f1as8ps8"],
+    "Bc28wk5": "flnfwa4",
+    "w1edd7": ["fuav46a", "fcnogh1"],
+    "Ba8awiv": "f19zilzp",
+    "I50xcx": ["fcnogh1", "fuav46a"],
+    "Bnmjwt4": "f119w1j1",
+    "Jopkrh": ["f1wlf18u", "fcqg1ja"],
+    "hhrs2v": "ft77uen",
+    "B7jbng7": ["fcqg1ja", "f1wlf18u"]
+  },
   "states": {
     "Bi91k9c": "feu1g3u",
     "Jwef8y": "f1knas48",
@@ -199,7 +222,7 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
     "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);}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gx8lax:focus{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1as8ps8:focus{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f17o1ya2:focus{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1amggu6:focus{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f119w1j1:focus{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1wlf18u:focus{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fcqg1ja:focus{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .ft77uen:focus{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
   "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
@@ -213,26 +236,6 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
   "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__*/react_1.__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
  */
@@ -246,13 +249,16 @@ const useAvatarGroupStyles_unstable = state => {
   } = state;
   const styles = useStyles();
   const sizeStyles = useAvatarStyles_1.useSizeStyles();
-  const overflowContentStyles = useOverflowContentStyles();
   const overflowButtonStyles = useOverflowButtonStyles();
   const groupChildClassName = AvatarGroupItem_1.useGroupChildClassName(layout, size, true);
-  state.root.className = react_1.mergeClasses(exports.avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.focusIndicator, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], state.root.className);
 
   if (state.overflowContent) {
-    state.overflowContent.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowContent, overflowContentStyles.base, state.overflowContent.className);
+    state.overflowContent.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowContent, styles.overflowContent, state.overflowContent.className);
+  }
+
+  if (state.overflowSurface) {
+    state.overflowSurface.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowSurface, styles.overflowSurface, state.overflowSurface.className);
   }
 
   const overflowButtonClasses = [];
@@ -300,7 +306,7 @@ const useAvatarGroupStyles_unstable = state => {
   }
 
   if (state.overflowButton) {
-    state.overflowButton.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowButton, sizeStyles[size], overflowButtonStyles.base, ...overflowButtonClasses, layout !== 'pie' && overflowButtonStyles.states, layout !== 'pie' && overflowButtonStyles.focusIndicator, layout === 'pie' && overflowButtonStyles.pie, groupChildClassName, state.overflowButton.className);
+    state.overflowButton.className = react_1.mergeClasses(exports.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);
   }
 
   return state;

package/lib-commonjs/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};\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/"}
+{"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/"}