@fluentui/react-avatar 9.0.0-rc.8 → 9.0.1

package/lib/components/AvatarGroup/useAvatarGroup.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,yBAAT,QAA0C,uBAA1C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AACJ,IAAA,iBAAiB,GAAG,mBADhB;AAEJ,IAAA,MAAM,GAAG,QAFL;AAGJ,IAAA,QAHI;AAIJ,IAAA,UAAU,GAAG,CAJT;AAKJ,IAAA,IAAI,GAAG,EALH;AAMJ,IAAA,OAAO,GAAG;AANN,MAOF,KAPJ;AASA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,MAFK;AAGL,IAAA,IAHK;AAIL,IAAA,OAAO,EAAE,OAJJ;AAKL,IAAA,iBALK;AAML;AACA,IAAA,cAAc,EAAE,OAAO,CAAC,cAAR,CAAuB,OAAvB,CAA+B,wBAA/B,EAAyD,MAAM,CAAC,EAAD,CAA/D,CAPX;AAQL,IAAA,UAAU,EAAE;AACV;AACA,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,cAAc,EAAE,cAHN;AAIV,MAAA,cAAc,EAAE;AAJN,KARP;AAcL;AACA;AACA,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CAhBtB;AAoBL,IAAA,cAAc,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;AACrD,MAAA,QAAQ,EAAE,IAD2C;AAErD,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,QAAQ,EAAE;AAFE;AAFuC,KAAvB,CApB3B;AA2BL,IAAA,cAAc,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;AACrD,MAAA,QAAQ,EAAE,IAD2C;AAErD,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,QAAQ,EAAE;AAFE;AAFuC,KAAvB;AA3B3B,GAAP;AAmCD,CA7CM","sourcesContent":["import * as React from 'react';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport { Button } from '@fluentui/react-button';\nimport { avatarGroupDefaultStrings } from './AvatarGroup.strings';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const {\n    overflowIndicator = 'number-overflowed',\n    layout = 'spread',\n    children,\n    maxAvatars = 5,\n    size = 32,\n    strings = avatarGroupDefaultStrings,\n  } = props;\n\n  return {\n    maxAvatars,\n    layout,\n    size,\n    strings: strings,\n    overflowIndicator,\n    // TODO: Replace with actual logic.\n    tooltipContent: strings.tooltipContent.replace('{numOverflowedAvatars}', String(10)),\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n      popoverSurface: PopoverSurface,\n      popoverTrigger: Button,\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    popoverTrigger: resolveShorthand(props.popoverTrigger, {\n      required: true,\n      defaultProps: {\n        // TODO: Update children\n        children: '+10',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        // TODO: Update children\n        children: children,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"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/"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,cAAc,EAAE,iCAFqD;AAGrE,EAAA,cAAc,EAAE;AAHqD,CAAhE;AAMP,OAAO,MAAM,0BAA0B,GAAG;AACxC,EAAA,kBAAkB,EAAE;AADoB,CAAnC;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC,CAFyF,CAIzF;AACA;;AAEA,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAAC,qBAAqB,CAAC,cAAvB,EAAuC,KAAK,CAAC,cAAN,CAAqB,SAA5D,CAA7C;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAAC,qBAAqB,CAAC,cAAvB,EAAuC,KAAK,CAAC,cAAN,CAAqB,SAA5D,CAA7C;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n  popoverSurface: 'fui-AvatarGroup__popoverSurface',\n  popoverTrigger: 'fui-AvatarGroup__popoverTrigger',\n};\n\nexport const extraAvatarGroupClassNames = {\n  popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  if (state.popoverSurface) {\n    state.popoverSurface.className = mergeClasses(avatarGroupClassNames.popoverSurface, state.popoverSurface.className);\n  }\n\n  if (state.popoverTrigger) {\n    state.popoverTrigger.className = mergeClasses(avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n  overflowContent: 'fui-AvatarGroup__overflowContent',\n  overflowButton: 'fui-AvatarGroup__overflowButton',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  focusIndicator: createCustomFocusIndicatorStyle(\n    {\n      ...shorthands.borderColor('transparent'),\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n    },\n    { selector: 'focus-within' },\n  ),\n});\n\n/**\n * Styles for overflow button slot.\n */\nconst useOverflowButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    flexShrink: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.padding(0),\n\n    // match color to Avatar's outline color\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('CanvasText'),\n    },\n  },\n\n  // These styles match the default button styles\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n  }),\n\n  states: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n\n  pie: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: 'transparent',\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n  caption2Strong: { ...typographyStyles.caption2Strong },\n  caption1Strong: { ...typographyStyles.caption1Strong },\n  body1Strong: { ...typographyStyles.body1Strong },\n  subtitle2: { ...typographyStyles.subtitle2 },\n  subtitle1: { ...typographyStyles.subtitle1 },\n  title3: { ...typographyStyles.title3 },\n  borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n  borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n  borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n  borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Styles for overflow list slot.\n */\nconst useOverflowContentStyles = makeStyles({\n  base: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    width: '220px',\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, overflowIndicator, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowContentStyles = useOverflowContentStyles();\n  const overflowButtonStyles = useOverflowButtonStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && styles.pie,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.focusIndicator,\n    state.root.className,\n  );\n\n  if (state.overflowContent) {\n    state.overflowContent.className = mergeClasses(\n      avatarGroupClassNames.overflowContent,\n      overflowContentStyles.base,\n      state.overflowContent.className,\n    );\n  }\n\n  const overflowButtonClasses = [];\n\n  if (size < 36) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThin);\n  } else if (size < 56) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThick);\n  } else if (size < 72) {\n    overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n  } else {\n    overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n  }\n\n  if (overflowIndicator === 'count') {\n    if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n    } else if (size <= 28) {\n      overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n    } else if (size <= 96) {\n      overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.title3);\n    }\n  } else {\n    if (size <= 16) {\n      overflowButtonClasses.push(overflowButtonStyles.icon12);\n    } else if (size <= 24) {\n      overflowButtonClasses.push(overflowButtonStyles.icon16);\n    } else if (size <= 40) {\n      overflowButtonClasses.push(overflowButtonStyles.icon20);\n    } else if (size <= 48) {\n      overflowButtonClasses.push(overflowButtonStyles.icon24);\n    } else if (size <= 56) {\n      overflowButtonClasses.push(overflowButtonStyles.icon28);\n    } else if (size <= 72) {\n      overflowButtonClasses.push(overflowButtonStyles.icon32);\n    } else {\n      overflowButtonClasses.push(overflowButtonStyles.icon48);\n    }\n  }\n\n  if (state.overflowButton) {\n    state.overflowButton.className = mergeClasses(\n      avatarGroupClassNames.overflowButton,\n      sizeStyles[size],\n      overflowButtonStyles.base,\n      ...overflowButtonClasses,\n      layout !== 'pie' && overflowButtonStyles.states,\n      layout !== 'pie' && overflowButtonStyles.focusIndicator,\n      layout === 'pie' && overflowButtonStyles.pie,\n      groupChildClassName,\n      state.overflowButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupItem/AvatarGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AAIA;;;AAGG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;EAEA,iCAAiC,CAAC,KAAD,CAAjC;EACA,OAAO,8BAA8B,CAAC,KAAD,CAArC;AACD,CALyE,CAAnE;AAOP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"sourceRoot":"../src/"}

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

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

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

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

package/lib/components/AvatarGroupItem/index.js

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

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

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

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js

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

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

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

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

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