@fluentui/react-avatar 9.0.3 → 9.1.0

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js

@@ -1,12 +1,12 @@
-import { useSizeStyles } from '../../Avatar';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useSizeStyles } from '../../Avatar';
 export const avatarGroupItemClassNames = {
   root: 'fui-AvatarGroupItem',
   avatar: 'fui-AvatarGroupItem__avatar',
   overflowLabel: 'fui-AvatarGroupItem__overflowLabel'
 };
-const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divier--width';
+const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
 /**
  * Styles for the root slot
  */
@@ -69,43 +69,10 @@ const useOverflowLabelStyles = /*#__PURE__*/__styles({
   "d": [".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
 });
 /**
- * Styles for the pie layout
+ * Styles for the stack layout
  */
 
 
-const usePieStyles = /*#__PURE__*/__styles({
-  "base": {
-    "qhf8xq": "f1euv43f"
-  },
-  "twoSlices": {
-    "way436": "f1mfxe7f",
-    "Bqy7o86": ["f1c18q0d", "fojsu5g"],
-    "Hjso5x": "f1oifxvu",
-    "B73oaz0": ["fqdbg8w", "fzmpboy"]
-  },
-  "threeSlices": {
-    "way436": "f1mfxe7f",
-    "Bqy7o86": ["f1c18q0d", "fojsu5g"],
-    "B4jwau3": "f1ifdbou",
-    "d8ohzp": ["f137bn9p", "ffwkz12"],
-    "B395mff": "fkr8g3j",
-    "Bqzfac6": "f1l8nhah",
-    "tv7yr1": "f7qglgr",
-    "Bo30zgl": "flj7kkj"
-  },
-  "thick": {
-    "Bw9cqsg": "f1hcqiyb"
-  },
-  "thicker": {
-    "Bw9cqsg": "f3scl8u"
-  },
-  "thickest": {
-    "Bw9cqsg": "f46m186"
-  }
-}, {
-  "d": [".f1euv43f{position:absolute;}", ".f1mfxe7f:first-child{-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)) 0 25%);}", ".f1c18q0d:first-child{left:-25%;}", ".fojsu5g:first-child{right:-25%;}", ".f1oifxvu:nth-child(2){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)));}", ".fqdbg8w:nth-child(2){left:25%;}", ".fzmpboy:nth-child(2){right:25%;}", ".f1ifdbou:not(:first-child){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divier--width) var(--fuiAvatarGroupItem__divier--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divier--width) var(--fuiAvatarGroupItem__divier--width));}", ".f137bn9p:not(:first-child){left:50%;}", ".ffwkz12:not(:first-child){right:50%;}", ".fkr8g3j:not(:first-child){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".f1l8nhah:not(:first-child){transform-origin:0 0;}", ".f7qglgr:nth-child(3){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divier--width) 0 0 var(--fuiAvatarGroupItem__divier--width));clip-path:inset(var(--fuiAvatarGroupItem__divier--width) 0 0 var(--fuiAvatarGroupItem__divier--width));}", ".flj7kkj:nth-child(3){top:50%;}", ".f1hcqiyb{--fuiAvatarGroupItem__divier--width:var(--strokeWidthThick);}", ".f3scl8u{--fuiAvatarGroupItem__divier--width:var(--strokeWidthThicker);}", ".f46m186{--fuiAvatarGroupItem__divier--width:var(--strokeWidthThickest);}"]
-});
-
 const useStackStyles = /*#__PURE__*/__styles({
   "base": {
     "Bsft5z2": "f1iwjod4",
@@ -129,11 +96,7 @@ const useStackStyles = /*#__PURE__*/__styles({
     "Bc0dv0h": "f1o149bd",
     "Bt0nq95": ["f1xgvrhv", "f34pcxu"],
     "Bte176d": "f9nu0bd",
-    "Buo7p3s": ["f34pcxu", "f1xgvrhv"],
-    "Bjwas2f": "f14pvji2",
-    "Bn1d65q": ["f1xeojaw", "f1hodmrf"],
-    "Bxeuatn": "fcbbwn3",
-    "n51gp8": ["f1hodmrf", "f1xeojaw"]
+    "Buo7p3s": ["f34pcxu", "f1xgvrhv"]
   },
   "thick": {
     "a2br6o": "fiy03ts",
@@ -205,17 +168,13 @@ const useStackStyles = /*#__PURE__*/__styles({
   "d": [".f1iwjod4::after{content:'';}", ".f1mdlcz9::after{position:absolute;}", ".f15zbnnk::after{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1de97fc::after{border-top-color:var(--colorNeutralBackground2);}", ".fnkdar3::after{border-right-color:var(--colorNeutralBackground2);}", ".f1rue1y9::after{border-left-color:var(--colorNeutralBackground2);}", ".f6bjq4p::after{border-bottom-color:var(--colorNeutralBackground2);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fiy03ts::after{width:100%;}", ".f5o33kw::after{height:100%;}", ".f5kz84h::after{left:calc(-1 * var(--strokeWidthThick));}", ".f8jassg::after{right:calc(-1 * var(--strokeWidthThick));}", ".f1oigyhu::after{top:calc(-1 * var(--strokeWidthThick));}", ".fozawe0::after{border-top-width:var(--strokeWidthThick);}", ".f15gmigz::after{border-right-width:var(--strokeWidthThick);}", ".f11o3tup::after{border-left-width:var(--strokeWidthThick);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1f2c3j3::after{left:calc(-1 * var(--strokeWidthThicker));}", ".f1g5d141::after{right:calc(-1 * var(--strokeWidthThicker));}", ".f1vvl5ts::after{top:calc(-1 * var(--strokeWidthThicker));}", ".f1gbh4dy::after{border-top-width:var(--strokeWidthThicker);}", ".f1os6oqe::after{border-right-width:var(--strokeWidthThicker);}", ".f4y7ea8::after{border-left-width:var(--strokeWidthThicker);}", ".f1a3lyng::after{border-bottom-width:var(--strokeWidthThicker);}", ".fueot05::after{left:calc(-1 * var(--strokeWidthThickest));}", ".f1mir6xb::after{right:calc(-1 * var(--strokeWidthThickest));}", ".f1izs6vq::after{top:calc(-1 * var(--strokeWidthThickest));}", ".f15ae8rs::after{border-top-width:var(--strokeWidthThickest);}", ".f1c7xjog::after{border-right-width:var(--strokeWidthThickest);}", ".fn35eni::after{border-left-width:var(--strokeWidthThickest);}", ".f9v1pvc::after{border-bottom-width:var(--strokeWidthThickest);}", ".fe2wxzu::after{width:calc(100% + var(--strokeWidthThin) * 2);}", ".fcr18t3::after{height:calc(100% + var(--strokeWidthThin) * 2);}", ".fhjhgwu::after{left:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".fh9v7u1::after{right:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f1mqssek::after{top:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f19rfb2x::after{width:calc(100% + var(--strokeWidthThick) * 2);}", ".fk4cr37::after{height:calc(100% + var(--strokeWidthThick) * 2);}", ".foc71j7::after{left:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1xoeo06::after{right:calc(-1 * var(--strokeWidthThick) * 2);}", ".fd6iyyb::after{top:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1byqz6t::after{width:calc(100% + var(--strokeWidthThicker) * 2);}", ".fdqxnrd::after{height:calc(100% + var(--strokeWidthThicker) * 2);}", ".f1x8rm7i::after{left:calc(-1 * var(--strokeWidthThicker) * 2);}", ".ftx9300::after{right:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f13zu3lb::after{top:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f1i9snzy::after{width:calc(100% + var(--strokeWidthThickest) * 2);}", ".f19z50l7::after{height:calc(100% + var(--strokeWidthThickest) * 2);}", ".f1fgc9m6::after{left:calc(-1 * var(--strokeWidthThickest) * 2);}", ".f1d4bgoy::after{right:calc(-1 * var(--strokeWidthThickest) * 2);}", ".fkll7mr::after{top:calc(-1 * var(--strokeWidthThickest) * 2);}", ".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}", ".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}", ".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}", ".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}", ".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}", ".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"],
   "m": [["@media (forced-colors: active){.f1dpauah::after{forced-color-adjust:none;}}", {
     "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
   }]],
   "f": [".f1o149bd:focus::after{border-top-color:transparent;}", ".f1xgvrhv:focus::after{border-right-color:transparent;}", ".f34pcxu:focus::after{border-left-color:transparent;}", ".f9nu0bd:focus::after{border-bottom-color:transparent;}"]
 });
+/**
+ * Styles for the spread layout
+ */
+
 
 const useSpreadStyles = /*#__PURE__*/__styles({
   "s": {
@@ -236,6 +195,44 @@ const useSpreadStyles = /*#__PURE__*/__styles({
 }, {
   "d": [".f7lhxv7:not(:first-child){margin-left:var(--spacingHorizontalS);}", ".f6ou2b0:not(:first-child){margin-right:var(--spacingHorizontalS);}", ".f1h0okno:not(:first-child){margin-left:var(--spacingHorizontalMNudge);}", ".fnnqava:not(:first-child){margin-right:var(--spacingHorizontalMNudge);}", ".f1wkt588:not(:first-child){margin-left:var(--spacingHorizontalM);}", ".f1maio5g:not(:first-child){margin-right:var(--spacingHorizontalM);}", ".f1l333zn:not(:first-child){margin-left:var(--spacingHorizontalL);}", ".f1r41m4c:not(:first-child){margin-right:var(--spacingHorizontalL);}", ".fahr13a:not(:first-child){margin-left:var(--spacingHorizontalXL);}", ".f2n7rbo:not(:first-child){margin-right:var(--spacingHorizontalXL);}"]
 });
+/**
+ * Styles for the pie layout
+ */
+
+
+const usePieStyles = /*#__PURE__*/__styles({
+  "base": {
+    "qhf8xq": "f1euv43f"
+  },
+  "slices": {
+    "B3gf25r": "f16m7w7k",
+    "Be2twx7": ["f1o4hhgz", "fb4gjrz"],
+    "Bvaow4n": "f1pgb5nx",
+    "Gpecfs": ["fugirid", "f4sk99m"],
+    "bhabj1": "fjreaf3",
+    "B7rc6i7": ["f1k4vw81", "f1w1xcy7"],
+    "Bwrfys5": "f1ef8vxk",
+    "Bwuzm9m": ["f1x2qbfv", "f1xwf4nz"],
+    "fflka": "ff6xuso",
+    "do7bja": "fzpvk6c",
+    "Be8zqhl": "f4onu7f",
+    "Bij0kh0": ["f1ydfez1", "fjensob"],
+    "Bwexnyt": "f1yv732j",
+    "Bhe5x6o": "fchq2fj",
+    "B3kv7bh": "ff5binh"
+  },
+  "thick": {
+    "uiicq7": "fnyfzln"
+  },
+  "thicker": {
+    "uiicq7": "f1xdzzot"
+  },
+  "thickest": {
+    "uiicq7": "f1auhru5"
+  }
+}, {
+  "d": [".f1euv43f{position:absolute;}", ".f16m7w7k:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1o4hhgz:nth-of-type(1):nth-last-of-type(2){left:-25%;}", ".fb4gjrz:nth-of-type(1):nth-last-of-type(2){right:-25%;}", ".f1pgb5nx:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".fugirid:nth-of-type(2):nth-last-of-type(1){left:25%;}", ".f4sk99m:nth-of-type(2):nth-last-of-type(1){right:25%;}", ".fjreaf3:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1k4vw81:nth-of-type(1):nth-last-of-type(3){left:-25%;}", ".f1w1xcy7:nth-of-type(1):nth-last-of-type(3){right:-25%;}", ".f1ef8vxk:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));}", ".f1x2qbfv:nth-of-type(2):nth-last-of-type(2){left:50%;}", ".f1xwf4nz:nth-of-type(2):nth-last-of-type(2){right:50%;}", ".ff6xuso:nth-of-type(2):nth-last-of-type(2){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".fzpvk6c:nth-of-type(2):nth-last-of-type(2){transform-origin:0 0;}", ".f4onu7f:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));}", ".f1ydfez1:nth-of-type(3):nth-last-of-type(1){left:50%;}", ".fjensob:nth-of-type(3):nth-last-of-type(1){right:50%;}", ".f1yv732j:nth-of-type(3):nth-last-of-type(1){top:50%;}", ".fchq2fj:nth-of-type(3):nth-last-of-type(1){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".ff5binh:nth-of-type(3):nth-last-of-type(1){transform-origin:0 0;}", ".fnyfzln{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThick);}", ".f1xdzzot{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThicker);}", ".f1auhru5{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThickest);}"]
+});
 /**
  * Apply styling to the AvatarGroupItem slots based on the state
  */
@@ -243,16 +240,15 @@ const useSpreadStyles = /*#__PURE__*/__styles({
 
 export const useAvatarGroupItemStyles_unstable = state => {
   const {
-    nonOverflowAvatarsCount,
     isOverflowItem,
     layout,
     size
   } = state;
-  const rootStyles = useRootStyles();
+  const avatarStyles = useAvatarStyles();
+  const overflowLabelStyles = useOverflowLabelStyles();
   const pieStyles = usePieStyles();
+  const rootStyles = useRootStyles();
   const sizeStyles = useSizeStyles();
-  const overflowLabelStyles = useOverflowLabelStyles();
-  const avatarStyles = useAvatarStyles();
   const groupChildClassName = useGroupChildClassName(layout, size);
   const rootClasses = [rootStyles.base];
 
@@ -272,18 +268,14 @@ export const useAvatarGroupItemStyles_unstable = state => {
         rootClasses.push(pieStyles.thickest);
       }
 
-      if (nonOverflowAvatarsCount === 2) {
-        rootClasses.push(pieStyles.twoSlices);
-      } else if (nonOverflowAvatarsCount === 3) {
-        rootClasses.push(pieStyles.threeSlices);
-      }
+      rootClasses.push(pieStyles.slices);
     }
   } else {
     rootClasses.push(rootStyles.overflowItem);
   }
 
   state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
-  state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, !isOverflowItem && layout === 'pie' && avatarStyles.pie, state.avatar.className);
+  state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
 
   if (state.overflowLabel) {
     state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { useSizeStyles } from '../../Avatar';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divier--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  twoSlices: {\n    '&:first-child': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    '&:nth-child(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n  },\n  threeSlices: {\n    '&:first-child': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    '&:not(:first-child)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    '&:nth-child(3)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      top: '50%',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\nconst useStackStyles = makeStyles({\n  base: {\n    '&::after': {\n      content: \"''\",\n      position: 'absolute',\n      display: 'inline-flex',\n      // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n      ...shorthands.borderColor(tokens.colorNeutralBackground2),\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      ...shorthands.borderStyle('solid'),\n\n      '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  overflowButton: {\n    // border-color has to be set to transparent when there's focus due to the outline overlapping the focus ring.\n    '&:focus': {\n      '&::after': {\n        ...shorthands.borderColor('transparent'),\n      },\n    },\n    // hide inner border when using high contrast mode and use the outer (::after) to match Avatar's outline\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('Canvas'),\n    },\n  },\n  thick: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThick})`,\n      top: `calc(-1 * ${tokens.strokeWidthThick})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  thicker: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  thickest: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n  borderThin: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n      top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n    },\n  },\n  borderThick: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n    },\n  },\n  borderThicker: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n    },\n  },\n  borderThickest: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n    },\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { nonOverflowAvatarsCount, isOverflowItem, layout, size } = state;\n\n  const rootStyles = useRootStyles();\n  const pieStyles = usePieStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const avatarStyles = useAvatarStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      if (nonOverflowAvatarsCount === 2) {\n        rootClasses.push(pieStyles.twoSlices);\n      } else if (nonOverflowAvatarsCount === 3) {\n        rootClasses.push(pieStyles.threeSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    !isOverflowItem && layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (\n  layout: AvatarGroupProps['layout'],\n  size: AvatarSizes,\n  isOverflowButton?: boolean,\n): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      layoutClasses.push(stackStyles.base);\n\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n      if (isOverflowButton) {\n        layoutClasses.push(stackStyles.overflowButton);\n\n        if (size < 36) {\n          layoutClasses.push(stackStyles.borderThin);\n        } else if (size < 56) {\n          layoutClasses.push(stackStyles.borderThick);\n        } else if (size < 72) {\n          layoutClasses.push(stackStyles.borderThicker);\n        } else {\n          layoutClasses.push(stackStyles.borderThickest);\n        }\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  base: {\n    '&::after': {\n      content: \"''\",\n      position: 'absolute',\n      display: 'inline-flex',\n      // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n      ...shorthands.borderColor(tokens.colorNeutralBackground2),\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      ...shorthands.borderStyle('solid'),\n\n      '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  overflowButton: {\n    '&:focus::after': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  thick: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThick})`,\n      top: `calc(-1 * ${tokens.strokeWidthThick})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  thicker: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  thickest: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n  borderThin: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n      top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n    },\n  },\n  borderThick: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n    },\n  },\n  borderThicker: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n    },\n  },\n  borderThickest: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n    },\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (\n  layout: AvatarGroupProps['layout'],\n  size: AvatarSizes,\n  isOverflowButton?: boolean,\n): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      layoutClasses.push(stackStyles.base);\n\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n      if (isOverflowButton) {\n        layoutClasses.push(stackStyles.overflowButton);\n\n        if (size < 36) {\n          layoutClasses.push(stackStyles.borderThin);\n        } else if (size < 56) {\n          layoutClasses.push(stackStyles.borderThick);\n        } else if (size < 72) {\n          layoutClasses.push(stackStyles.borderThicker);\n        } else {\n          layoutClasses.push(stackStyles.borderThickest);\n        }\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -0,0 +1,16 @@
+import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
+import { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';
+import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';
+import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';
+/**
+ * The AvatarGroupPopover component provides a button with a Popover containing the children provided.
+ */
+
+export const AvatarGroupPopover = props => {
+  const state = useAvatarGroupPopover_unstable(props);
+  const contextValues = useAvatarGroupPopoverContextValues(state);
+  useAvatarGroupPopoverStyles_unstable(state);
+  return renderAvatarGroupPopover_unstable(state, contextValues);
+};
+AvatarGroupPopover.displayName = 'AvatarGroupPopover';
+//# sourceMappingURL=AvatarGroupPopover.js.map

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"names":[],"mappings":"AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,kCAAT,QAAmD,sCAAnD;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAsC,KAAK,IAAG;EAC3E,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,CAA5C;EACA,MAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,iCAAiC,CAAC,KAAD,EAAQ,aAAR,CAAxC;AACD,CANM;AAQP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupPopover.types.js","sourceRoot":"../src/","sources":["components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { AvatarSizes } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSizes;\n  };\n"]}

package/lib/components/AvatarGroupPopover/index.js

@@ -0,0 +1,6 @@
+export * from './AvatarGroupPopover';
+export * from './AvatarGroupPopover.types';
+export * from './renderAvatarGroupPopover';
+export * from './useAvatarGroupPopover';
+export * from './useAvatarGroupPopoverStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AvatarGroupPopover/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"]}

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
+import { getSlots } from '@fluentui/react-utilities';
+import { PopoverTrigger } from '@fluentui/react-popover';
+/**
+ * Render the final JSX of AvatarGroupPopover
+ */
+
+export const renderAvatarGroupPopover_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement(slots.tooltip, { ...slotProps.tooltip
+  }, /*#__PURE__*/React.createElement(slots.triggerButton, { ...slotProps.triggerButton
+  }))), /*#__PURE__*/React.createElement(slots.popoverSurface, { ...slotProps.popoverSurface
+  }, /*#__PURE__*/React.createElement(AvatarGroupProvider, {
+    value: contextValues.avatarGroup
+  }, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }))));
+};
+//# sourceMappingURL=renderAvatarGroupPopover.js.map

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,mCAApC;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAuB,cAAvB,QAA6C,yBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA0B,KAA1B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CADF,CADF,CADF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,eACE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CADF,CANF,CADF;AAcD,CApBM","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
+import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
+import { resolveShorthand, useControllableState } from '@fluentui/react-utilities';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
+import { Popover, PopoverSurface } from '@fluentui/react-popover';
+import { Tooltip } from '@fluentui/react-tooltip';
+/**
+ * Create the state required to render AvatarGroupPopover.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,
+ * before being passed to renderAvatarGroupPopover_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupPopover
+ */
+
+export const useAvatarGroupPopover_unstable = props => {
+  var _a;
+
+  const size = (_a = useAvatarGroupContext_unstable(ctx => ctx.size)) !== null && _a !== void 0 ? _a : defaultAvatarGroupSize;
+  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
+  const {
+    indicator = size < 24 ? 'icon' : 'count',
+    count = React.Children.count(props.children),
+    children,
+    ...restOfProps
+  } = props;
+  const [popoverOpen, setPopoverOpen] = useControllableState({
+    state: props.open,
+    defaultState: props.defaultOpen,
+    initialState: false
+  });
+
+  const handleOnPopoverChange = (e, data) => {
+    var _a;
+
+    (_a = restOfProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(restOfProps, e, data);
+    setPopoverOpen(data.open);
+  };
+
+  let triggerButtonChildren;
+
+  if (layout === 'pie') {
+    triggerButtonChildren = null;
+  } else if (indicator === 'icon') {
+    triggerButtonChildren = /*#__PURE__*/React.createElement(MoreHorizontalRegular, null);
+  } else {
+    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
+  }
+
+  return {
+    popoverOpen,
+    layout,
+    indicator,
+    size,
+    components: {
+      root: Popover,
+      triggerButton: 'button',
+      content: 'ul',
+      popoverSurface: PopoverSurface,
+      tooltip: Tooltip
+    },
+    root: {
+      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.
+      children: /*#__PURE__*/React.createElement(React.Fragment, null),
+      size: 'small',
+      trapFocus: true,
+      ...restOfProps,
+      open: popoverOpen,
+      onOpenChange: handleOnPopoverChange
+    },
+    triggerButton: resolveShorthand(props.triggerButton, {
+      required: true,
+      defaultProps: {
+        children: triggerButtonChildren,
+        type: 'button'
+      }
+    }),
+    content: resolveShorthand(props.content, {
+      required: true,
+      defaultProps: {
+        children: children,
+        role: 'list'
+      }
+    }),
+    popoverSurface: resolveShorthand(props.popoverSurface, {
+      required: true,
+      defaultProps: {
+        'aria-label': 'Overflow',
+        tabIndex: 0
+      }
+    }),
+    tooltip: resolveShorthand(props.tooltip, {
+      required: true,
+      defaultProps: {
+        content: 'View more people.',
+        relationship: 'label'
+      }
+    })
+  };
+};
+//# sourceMappingURL=useAvatarGroupPopover.js.map

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const {\n    indicator = size < 24 ? 'icon' : 'count',\n    count = React.Children.count(props.children),\n    children,\n    ...restOfProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'icon') {\n    triggerButtonChildren = <MoreHorizontalRegular />;\n  } else {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    popoverOpen,\n    layout,\n    indicator,\n    size,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: {\n      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n      children: <></>,\n      size: 'small',\n      trapFocus: true,\n      ...restOfProps,\n      open: popoverOpen,\n      onOpenChange: handleOnPopoverChange,\n    },\n    triggerButton: resolveShorthand(props.triggerButton, {\n      required: true,\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        children: children,\n        role: 'list',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n    }),\n    tooltip: resolveShorthand(props.tooltip, {\n      required: true,\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js

@@ -0,0 +1,10 @@
+export const useAvatarGroupPopoverContextValues = state => {
+  const avatarGroup = {
+    isOverflow: true,
+    size: 24
+  };
+  return {
+    avatarGroup
+  };
+};
+//# sourceMappingURL=useAvatarGroupPopoverContextValues.js.map

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"names":[],"mappings":"AAGA,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAA6D;EAC7G,MAAM,WAAW,GAA4B;IAC3C,UAAU,EAAE,IAD+B;IAE3C,IAAI,EAAE;EAFqC,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CAPM","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}