npm - @fluentui/react-avatar - Versions diffs - 9.2.7 → 9.2.8 - Mend

@fluentui/react-avatar 9.2.7 → 9.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,58 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:31 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:18 GMT",
+      "tag": "@fluentui/react-avatar_v9.2.8",
+      "version": "9.2.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "1a558639a977347b237c9134f09b47f0fc00ad48",
+            "comment": "fix: AvatarGroup's pie layout places inline items correctly in rtl."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.14",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.3.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:33 GMT",
       "tag": "@fluentui/react-avatar_v9.2.7",
       "version": "9.2.7",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-avatar
-This log was last generated on Thu, 17 Nov 2022 23:02:31 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:18 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.8)
+Mon, 05 Dec 2022 18:25:18 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.7..@fluentui/react-avatar_v9.2.8)
+### Patches
+- fix: AvatarGroup's pie layout places inline items correctly in rtl. ([PR #25822](https://github.com/microsoft/fluentui/pull/25822) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.14 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-popover to v9.3.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.1.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-tooltip to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
 ## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.7)
-Thu, 17 Nov 2022 23:02:31 GMT
+Thu, 17 Nov 2022 23:05:33 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.6..@fluentui/react-avatar_v9.2.7)
 ### Patches

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useSizeStyles } from '../../Avatar';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 export const avatarGroupItemClassNames = {
   root: 'fui-AvatarGroupItem',
   avatar: 'fui-AvatarGroupItem__avatar',
@@ -148,6 +149,15 @@ const usePieStyles = /*#__PURE__*/__styles({
     "Bhe5x6o": "fchq2fj",
     "B3kv7bh": "ff5binh"
   },
+  "rtlSlices": {
+    "B3gf25r": "f5vdl61",
+    "Bvaow4n": "f1bnra92",
+    "bhabj1": "f4ibo7t",
+    "Bwrfys5": "f17heuis",
+    "Bwuzm9m": ["f64f2ud", "f1yjglu3"],
+    "Be8zqhl": "fa6l61x",
+    "Bij0kh0": ["f1w2396a", "f14ab3yo"]
+  },
   "thick": {
     "uiicq7": "fnyfzln"
   },
@@ -158,7 +168,7 @@ const usePieStyles = /*#__PURE__*/__styles({
     "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);}"]
+  "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;}", ".f5vdl61:nth-of-type(1):nth-last-of-type(2){-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)));}", ".f1bnra92:nth-of-type(2):nth-last-of-type(1){-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%);}", ".f4ibo7t:nth-of-type(1):nth-last-of-type(3){-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)));}", ".f17heuis:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);}", ".f64f2ud:nth-of-type(2):nth-last-of-type(2){left:0;}", ".f1yjglu3:nth-of-type(2):nth-last-of-type(2){right:0;}", ".fa6l61x:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);}", ".f1w2396a:nth-of-type(3):nth-last-of-type(1){left:0;}", ".f14ab3yo:nth-of-type(3):nth-last-of-type(1){right: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
@@ -171,6 +181,9 @@ export const useAvatarGroupItemStyles_unstable = state => {
     layout,
     size
   } = state;
+  const {
+    dir
+  } = useFluent();
   const avatarStyles = useAvatarStyles();
   const overflowLabelStyles = useOverflowLabelStyles();
   const pieStyles = usePieStyles();
@@ -196,6 +209,10 @@ export const useAvatarGroupItemStyles_unstable = state => {
       }
       rootClasses.push(pieStyles.slices);
+      if (dir === 'rtl') {
+        rootClasses.push(pieStyles.rtlSlices);
+      }
     }
   } else {
     rootClasses.push(rootStyles.overflowItem);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-avatar/src/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 thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\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 = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\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 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/"}
1	+ {"version":3,"sources":["packages/react-components/react-avatar/src/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 { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\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 rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 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 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '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 const { dir } = useFluent();\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 if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\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 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 = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\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 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-amd/components/AvatarGroupItem/useAvatarGroupItemStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "../../Avatar"], function (require, exports, tslib_1, react_1, react_theme_1, Avatar_1) {
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "../../Avatar", "@fluentui/react-shared-contexts"], function (require, exports, tslib_1, react_1, react_theme_1, Avatar_1, react_shared_contexts_1) {
     "use strict";
     var _a, _b, _c;
     Object.defineProperty(exports, "__esModule", { value: true });
@@ -107,6 +107,32 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
                 transformOrigin: '0 0',
             },
         },
+        rtlSlices: {
+            // Two slices
+            // 1st of 2 items
+            '&:nth-of-type(1):nth-last-of-type(2)': {
+                clipPath: "inset(0 25% 0 calc(25% + (var(" + avatarGroupItemDividerWidthVar + ") / 2)))",
+            },
+            // 2nd of 2 items
+            '&:nth-of-type(2):nth-last-of-type(1)': {
+                clipPath: "inset(0 calc(25% + (var(" + avatarGroupItemDividerWidthVar + ") / 2)) 0 25%)",
+            },
+            // Three slices
+            // 1st of 3 items
+            '&:nth-of-type(1):nth-last-of-type(3)': {
+                clipPath: "inset(0 25% 0 calc(25% + (var(" + avatarGroupItemDividerWidthVar + ") / 2)))",
+            },
+            // 2nd of 3 items
+            '&:nth-of-type(2):nth-last-of-type(2)': {
+                clipPath: "inset(0 var(" + avatarGroupItemDividerWidthVar + ") var(" + avatarGroupItemDividerWidthVar + ") 0)",
+                left: '0',
+            },
+            // 3rd of 3 items
+            '&:nth-of-type(3):nth-last-of-type(1)': {
+                clipPath: "inset(var(" + avatarGroupItemDividerWidthVar + ") var(" + avatarGroupItemDividerWidthVar + ") 0 0)",
+                left: '0',
+            },
+        },
         thick: (_a = {}, _a[avatarGroupItemDividerWidthVar] = react_theme_1.tokens.strokeWidthThick, _a),
         thicker: (_b = {}, _b[avatarGroupItemDividerWidthVar] = react_theme_1.tokens.strokeWidthThicker, _b),
         thickest: (_c = {}, _c[avatarGroupItemDividerWidthVar] = react_theme_1.tokens.strokeWidthThickest, _c),
@@ -116,6 +142,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
      */
     var useAvatarGroupItemStyles_unstable = function (state) {
         var isOverflowItem = state.isOverflowItem, layout = state.layout, size = state.size;
+        var dir = react_shared_contexts_1.useFluent_unstable().dir;
         var avatarStyles = useAvatarStyles();
         var overflowLabelStyles = useOverflowLabelStyles();
         var pieStyles = usePieStyles();
@@ -139,6 +166,9 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
                     rootClasses.push(pieStyles.thickest);
                 }
                 rootClasses.push(pieStyles.slices);
+                if (dir === 'rtl') {
+                    rootClasses.push(pieStyles.rtlSlices);
+                }
             }
         }
         else {

package/lib-amd/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAvatarGroupItemStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/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 thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\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 = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\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 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"]}
1	+ {"version":3,"file":"useAvatarGroupItemStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/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 { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\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 rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 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 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '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 const { dir } = useFluent();\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 if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\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 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 = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\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 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"]}

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js CHANGED Viewed

@@ -11,6 +11,8 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 const Avatar_1 = /*#__PURE__*/require("../../Avatar");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 exports.avatarGroupItemClassNames = {
   root: 'fui-AvatarGroupItem',
   avatar: 'fui-AvatarGroupItem__avatar',
@@ -158,6 +160,15 @@ const usePieStyles = /*#__PURE__*/react_1.__styles({
     "Bhe5x6o": "fchq2fj",
     "B3kv7bh": "ff5binh"
   },
+  "rtlSlices": {
+    "B3gf25r": "f5vdl61",
+    "Bvaow4n": "f1bnra92",
+    "bhabj1": "f4ibo7t",
+    "Bwrfys5": "f17heuis",
+    "Bwuzm9m": ["f64f2ud", "f1yjglu3"],
+    "Be8zqhl": "fa6l61x",
+    "Bij0kh0": ["f1w2396a", "f14ab3yo"]
+  },
   "thick": {
     "uiicq7": "fnyfzln"
   },
@@ -168,7 +179,7 @@ const usePieStyles = /*#__PURE__*/react_1.__styles({
     "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);}"]
+  "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;}", ".f5vdl61:nth-of-type(1):nth-last-of-type(2){-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)));}", ".f1bnra92:nth-of-type(2):nth-last-of-type(1){-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%);}", ".f4ibo7t:nth-of-type(1):nth-last-of-type(3){-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)));}", ".f17heuis:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);}", ".f64f2ud:nth-of-type(2):nth-last-of-type(2){left:0;}", ".f1yjglu3:nth-of-type(2):nth-last-of-type(2){right:0;}", ".fa6l61x:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);}", ".f1w2396a:nth-of-type(3):nth-last-of-type(1){left:0;}", ".f14ab3yo:nth-of-type(3):nth-last-of-type(1){right: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
@@ -181,6 +192,9 @@ const useAvatarGroupItemStyles_unstable = state => {
     layout,
     size
   } = state;
+  const {
+    dir
+  } = react_shared_contexts_1.useFluent_unstable();
   const avatarStyles = useAvatarStyles();
   const overflowLabelStyles = useOverflowLabelStyles();
   const pieStyles = usePieStyles();
@@ -206,6 +220,10 @@ const useAvatarGroupItemStyles_unstable = state => {
       }
       rootClasses.push(pieStyles.slices);
+      if (dir === 'rtl') {
+        rootClasses.push(pieStyles.rtlSlices);
+      }
     }
   } else {
     rootClasses.push(rootStyles.overflowItem);

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-avatar/src/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 thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\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 = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\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 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/"}
1	+ {"version":3,"sources":["packages/react-components/react-avatar/src/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 { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\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 rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 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 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '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 const { dir } = useFluent();\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 if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\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 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 = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\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 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.2.7",
+  "version": "9.2.8",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,14 +34,14 @@
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.0.13",
+    "@fluentui/react-badge": "^9.0.14",
     "@fluentui/react-context-selector": "^9.1.2",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.3.2",
-    "@fluentui/react-shared-contexts": "^9.1.1",
-    "@fluentui/react-tabster": "^9.3.1",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-tooltip": "^9.1.2",
+    "@fluentui/react-popover": "^9.3.3",
+    "@fluentui/react-shared-contexts": "^9.1.2",
+    "@fluentui/react-tabster": "^9.3.2",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-tooltip": "^9.1.3",
     "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"